In this lesson, you will learn how to add an easier user experience with a quicker filtering process by filtering your repeater database content without Search or Reset buttons.
Before we share the code, we highly suggest you watch our video to make sure you set up your website correctly:
Now that you have set up your website, feel free to copy the code to your website:
//Filter with a Text Input:
import wixData from 'wix-data'; $w.onReady(function () { $w('#searchInput').onInput(() => { search(); }) }); function search() { wixData.query("Properties") .contains("title", $w('#searchInput').value) .or(wixData.query("Properties").contains("agentName", $w('#searchInput').value)) .find() .then(results => { $w('#propertiesRepeater').data = results.items; }); }
//Filter with Dropdown Input:
import wixData from 'wix-data'; $w.onReady(function () { $w('#dropdown1').onChange(() => { search(); }) }); function search() { wixData.query("Properties") .contains("title", $w('#dropdown1').value) .or(wixData.query("Properties").contains("agentName", $w('#dropdown1').value)) .find() .then(results => { $w('#propertiesRepeater').data = results.items; }); }
In order for this code to work, please check all of your element and database names. Either change the name of elements on your website's page, or change the code to match the names in the code to match the names you gave the elements on your page. Also, make sure you use your correct database name and field keys for searching.
Have Fun!