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
#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 |
Jim | Smith | Finance |
John | Smith | Sales |
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_keyPress, iptDepartment1_change and iptDepartment2_change. iptSearch_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