I need help to create a Advanced Search

Ask the community
,
1

Hi,
I need to add advanced search with one input box and 4 drop downs.
I able to create fine with search with one input box and one drop down but it’s not working for more drop downs.
I need help to add more drop dawns for search.

this is my code for one input field and one dropdown

531×551 40.2 KB

Thank you

2

Hi,

It’s possible to add more dropdown to your search, you just need to add them to your code the same as you done with the first dropdown.

First , add more loadContinents() functions according to the number of dropdown you add and include the filed from the collection that you wish to present at each dropdown list.

Second , add an onChange() event handler to each dropdown, and call to filter() function with the new parameters you added.

For example, if I have two dropdown the prototype function will be:

function filter(title, continent1, continent2)

And these are the event handlers: 

export function dropdown1_change(event) {
  filter(lastFilterTitle, $w('#dropdown1').value, lastFilterContinent2 );
}
export function dropdown2_change(event) {
  filter(lastFilterTitle, lastFilterContinent1, $w('#dropdown2').value);
}
  • As you can see, I also added a new variable lastFilterContinent2.

Third, rewrite the filter() function again according to your new parameters:

Follow the example above:

function filter(title, continent1, continent2) {
 if (lastFilterTitle !== title || lastFilterContinent1 !== continent1 ||  lastFilterContinent2 !== continent2) {
 
 let newFilter = wixData.filter();
 
 if (title)
      newFilter = newFilter.contains('title', title);
 if (continent1)
      newFilter = newFilter.contains('filed1', continent1);
 if (continent2)
      newFilter = newFilter.contains('filed2', continent2); 
    
    $w('#dataset1').setFilter(newFilter);   
    lastFilterTitle = title; 
    lastFilterContinent1 = continent1;
    lastFilterContinent2 = continent2;
  }
}

This video can also be helpful:

Have a nice day, and best of luck!
Sapir

3

Hi Sapir,
Thank you for the reply.
Finally I able to do it.
Thank you very much.