Dynamically Filter a Repeater

Allow users to apply a wildcard search filter or dropdown filter to a table or repeater using Corvid (a.k.a. Wix Code). Learn how to apply wildcard searches to more than one text field in your collection at the same time and how to work with predefined or dynamic dropdown options.

​This example assumes you already know how to create a table or repeater and connect it to your dataset. The table in this example uses data from the #dbEmployee database and features a text input field for keyword searches (#iptSearch) and two dropboxes: one for predefined filtering options (#iptDepartment1) and the other for dynamic filtering options which populate automatically from the data in your collection (#iptDepartment2). Try the example below.

Try it!
#iptSearch
#iptDepartment1
arrow&v
arrow&v
#iptDepartment2
First Name
Last Name
Department
Jane
Austen
Operations
Jenny
Cruz
Sales
Joy
Dunner
Sales
Josie
Fay
Finance
Jim
Fraser
Finance
Judith
Jane
Finance
Jeff
McGowan
Sales
James
Norris
Sales
John
Smith
Sales
Jim
Smith
Finance
Mark
Twain
Operations
Johnny
Walker
Finance
Julie
Walsh
Sales
Janine
Wayne
Operations
Jack
Wilde
Sales

Add an onKeyPress event listener to #iptSearch and onChange event listeners to #iptDepartment1  and #iptDepartment2. Add the code which follows to your page code, modifying as necessary. The global variables lastSearch and lastDept will store the prior filter criteria used in order to check if a new filter is required when the selection changes.

The filterResults function does the filtering of the table when executed, based on the parameters passed via search and dept. The #dbEmployees database is filtered on both firstName and lastName based on the #iptSearch, while the department is filtered by either of the two dropdown boxes. The first thing the function does is to check if a new filter is required by comparing the current parameters (searchand dept) to the previous parameters (lastSearch and lastDept). If any of the parameters have changed, then a new filter is executed.  

The  event listeners added to #iptSearch#iptDepartment1 and #iptDepartment2 pass the parameters 

entered by the user to filterResults using the functions iptSearch_keyPressiptDepartment1_change and iptDepartment2_changeiptSearch_keyPresshas a one second delay before sending the parameters to filterResults to ensure the user is finished typing before the search is initiated. iptDepartment1_change and iptDepartment2_change both reset each other when used, so as not to confuse the user.

Page Code

The last thing to do is to add the options to the dropdown boxes iptDepartment1_change and iptDepartment2_change. For iptDepartment1_change the options are manually entered by left clicking and selecting 'Manage Choices'. Remember to add both label and value to each choice - the value needs to match the data in the collection exactly, and is case sensitive. The page code below populates the iptDepartment2_change dropdown.

The uniqueDepartment function populates the choices for the iptDepartment2_change dropdown with a unique list of departments from the data in the #Employee collection (making a direct reference to this collection). This function is called onReady to populate with department choices as soon as the page loads. It also allows for an 'Any Department' choice which is not available in the data - but is treated as null or no department chosen.

Page Code

Please wait ...
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! All our code snippets come with full support to help you implement them on your own website - simply contact us for help.