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.
//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!
Comentarios