Is there a way to have one filter box filter the contents on 2 listviews?

[KorryRogers]

I have 2 listviews stacked on top of each other. I'd like to have 1 filter form field to filter the contents for both lists. Is that possible?

[Alena Prykhodko]

Hello Korry,

Here is a brief plan for your goal:

1 Create two listviews with filters;
2 Hide one of filters;
3 For first listview on "keyup" handler do the following:
3.1 Edit value of the second filter on basis of the first one.
3.2 For second listview generate "keyup" handler as well.

[KorryRogers]

How do I go about assigning an ID, NAME or CSS properties to the filter form field so I can accomplish this solution? I don't see a way to do that.

[Yurii Orishchuk]

Hi Korry,

1. To hide filter element for corresponding list you can use following code:

   pre

   //Note "mobilelist_65" is list component name that's corresponding to this goal filter.
   Apperyio("mobilelist_65").prev(".ui-filterable").hide();

   /pre

2. To trigger event to the filter component you can use code below:

   pre

   //You should assign to this variable value from visible filter(that's user have interact with).
   var currentValue = "111";

   //Note "mobilelist_65" is list component name that's corresponding to this goal filter.
   Apperyio("mobilelist_65").prev(".ui-filterable").find("input").val(currentValue).trigger("keyup");

   /pre

   That's all.

   Regards.

[KorryRogers]

I've been playing around with this and can't seem to get it to work. I'm certainly not a JS expert though. Where does this JS need to be put? Do I just create a new JS file?

The .trigger("keyup") doesn't appear to be working right. I just left the currentValue variable as a fixed value, and the filter never changes. I feel like this should be wrapped up in some sort of keyup function on the first filter field, but I don't know how to write that function.

[Yurii Orishchuk]

Korry,

1. It's tested code and should work.

2. You should run "hide" code on "page show" event handler.

3. You should run "keyup" code on "keyup" event handler for first filter input.

   If you still have a problem with this implementation show us screen shots what you have tried so far.

   Regards.

[KorryRogers]

I can't figure out how to get to the keyup event on the first filter. When I try to click on it to add the JS, it just give me options for the list itself, not the filter input item. I've added the JS to the keyup event on the list, but I'm assuming I need to get the JS running on the keyup event for the filter input.

[Yurii Orishchuk]

Hi Korry,

Here is ready solution for you:

1 Add two lists on the page. And activate "Data filter" on them. Give them name "firstList" and "secondList" http://prntscr.com/4n6s32/direct

2 Add "page show" JS event handler with following code: http://prntscr.com/4n6yh9/direct

pre

var firstListFilter = Apperyio("firstList").prev(".ui-filterable").find("input");
var secondListFilter = Apperyio("secondList").prev(".ui-filterable").find("input");

var onFirstListInputKeyUp = function(){
//Get value from firstList filter.
var firstListFilterValue = jQuery(this).val();

Code: Select all

 console.log("value = " + firstListFilterValue); 

 //Set secondList filter value the same as firstList value. 
 secondListFilter.val(firstListFilterValue).trigger("keyup"); 

};

//Bind keyup event from first list filter.
firstListFilter.bind("keyup", onFirstListInputKeyUp);

//Hide secondList filter.
Apperyio("secondList").prev(".ui-filterable").hide();

/pre

That's all.

Regards.

[KorryRogers]

Perfect! Thank you for being patient with my ignorance!

[sebastian]

Hi Yurri,

I'm trying to built a list component inside a collapsible set. I want each list component to use the data filter to search for a unique order id associated with each item on the collapsible set. I used a for loop to try to create an array and achieving this goal but It hasn't had much luck. Is it possible to have a data filter to be used in such a way? It seems like every time the list gets populated when there is more the one item in the collapsible set the data filter disappears.

regards,
Sebastian