Hi Guys,
This is not as detailed as the other tutorials but this will definitely help you with setting up your custom search bar.
What will you need?
Dataset
Dev Mode On
Code:
export function btnSearch_click(event) { filterModels($w("#iptSearch").value, $w("#iptGender").value); } function filterModels(search, gender){ $w("#modelGal").hide(); $w("#modelGal").collapse(); $w("#noResultTxt").hide(); $w("#noResultTxt").collapse(); if(lastSearch !== search || lastGender !== gender){ let newFilter = wixData.filter(); if(search) newFilter = newFilter.contains('title',search) .or(newFilter.contains('bio',search) .or(newFilter.contains('city',search))); if(gender) newFilter = newFilter.eq('gender',gender); $w("#dbModels").setFilter(newFilter) .then(() => { let count = $w("#dbModels").getTotalCount(); if(count > 0){ $w("#modelGal").show(); $w("#modelGal").expand(); } else { $w("#noResultTxt").show(); $w("#noResultTxt").expand(); } }); lastGender = gender; lastSearch = search; } } function loadGender() { var gender = $w("#dbModels").getCurrentItem(); wixData.query('Models') .contains("gender",gender) .find() .then(res => { let options = [{"value": '', "label": 'All Models'}]; options.push(...res.items.map(gender => { return {"value": gender.gender, "label": gender.gender}; })); $w('#iptGender').options = options; }); } export function btnReset_click(event) { $w("#iptGender").value = null; $w("#iptSearch").value = null; filterModels($w("#iptGender").value,$w("#iptSearch").value); $w("#dbModels").setSort(wixData.sort().ascending("_createdDate")) }
Explanation to the code:
Part 1:
export function btnSearch_click(event) { filterModels($w("#iptSearch").value, $w("#iptGender").value); }
Explanation:
You will give logic to search the query based on the value that has been input or selected for search.
filterModels is the function that you need to define as follows:
function filterModels(search, gender){
$w("#modelGal").hide(); $w("#modelGal").collapse(); - This is the reference to the repeater or gallery item that will be hidden by default
$w("#noResultTxt").hide(); $w("#noResultTxt").collapse(); - This is the reference to the text that will be hidden by default and displayed only on no results found
if(lastSearch !== search || lastGender !== gender){
let newFilter = wixData.filter();
if(search)
newFilter = newFilter.contains('title',search)
.or(newFilter.contains('bio',search)
.or(newFilter.contains('city',search)));
if(gender)
newFilter = newFilter.eq('gender',gender);
newFilter.contains & newFilter.eq has 2 parts to the code i.e. reference column from the dataset and reference to the filter logic that has been defined in the function.
.contains will scan the reference columns for the keywords and give the desired output.
.eq will give you the exact match output. .eq stands for equals to. You can use this for unique values and not for open-ended search parameters. $w("#dbModels").setFilter(newFilter) .then(() => { let count = $w("#dbModels").getTotalCount(); if(count > 0){ $w("#modelGal").show(); $w("#modelGal").expand(); } else { $w("#noResultTxt").show(); $w("#noResultTxt").expand(); } This is the section where we define to load the repeater or gallery if there is a single result meeting the search criteria else display the No Result Text. }); lastGender = gender; lastSearch = search; This rule is letting us store the last searched result unless the filter is reset or the page is refreshed. } } Below is the code used to fetch the dropdown field values from the dataset. function loadGender() { var gender = $w("#dbModels").getCurrentItem(); wixData.query('Models') .contains("gender",gender) .find() .then(res => { let options = [{"value": '', "label": 'All Models'}]; options.push(...res.items.map(gender => { return {"value": gender.gender, "label": gender.gender}; })); $w('#iptGender').options = options; }); } Below is the reset function to load all the results and set a sorting on loading the results. export function btnReset_click(event) { $w("#iptGender").value = null; $w("#iptSearch").value = null; filterModels($w("#iptGender").value,$w("#iptSearch").value); $w("#dbModels").setSort(wixData.sort().ascending("_createdDate")) }
