top of page
Dynamically Filtering a Repeater
ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.
The following code shows you how to implement a wildcard search and dropdown filter to a repeater, either separately or used in conjunction with each other. It shows you how to apply a wildcard search to more than one field in your collection at the same time e.g. search both text title and text body.
This example assumes you already know how to create a repeater and connect it to your dataset. The next step is to add a text input field for keyword searches and a dropbox for predefined option searches. This example will show you how to create the same functionality used on WixCodeBank to search for code by keyword or cost. Consequently, the inputs are given the aliases #iptSearch and #iptCost for this example. Add an onKeyPress event listener to the search box and an onChange event listener to the dropdown box.
Add the code which follows to the top of your page code. The global variables declared will store the search criteria used in order to check if a new search is warranted on a particular selection.
Next we create a filter function to do the filtering of the dataset for the repeater by either keyword or cost (the arguments passed to the function). The first thing the function does is to check if a new filter activity is required by comparing the latest arguments to the previous arguments received. If any of the arguments have changed, then a new filter activity is required.
Each parameter is checked in turn, with newFilter updated with any changes. The title, brief and desc fields of #dbCodeBank are checked to see if they contain the keyword being searched for. The price field is being compared to the cost selection chosen. Finally, the current search parameters are saved and remembered so that we can check if they have changed the next time a search is initiated.
The final code snippets are activated by the input fields #iptSearch and #iptCost. They effectively pass parameters to the filter function declared earlier. The #iptSearch has a one second time delay before sending the results to the filter function. This is to ensure the user is finished typing before the search is initiated (it allows the user one second to finish typing the search keyword). Whichever search is done, the other search parameters are taken at their previous or last values e.g. lastCost and lastSearch.
Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.
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! We will help where we can, however please be aware that the code is provided 'as is' and without a promise of support in using or implementing it.
bottom of page