Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CUSTOMIZED SEARCH BAR USING REPEATERS
Need a customized search bar for your Wix website? This tutorial will show you how to create a customized search bar for your website with Wix Code. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
THE ELEMENTS
The Page
Container Box: #searchbar
β
βUser Input: #search
β
Image Element: #searchicon
β
Repeater (List): #repeater1ββ (collapsed on load)
-
Text Element: #ResultsText
-
Button Element: #ResultsButton (Link to dynamic page)
The Database
Create a database: Recipes (dataset1)
β
Recommended fields:
-
Recipe Name Field: RecipeName (for search)
-
Recipe Description Field: description
-
Ingredients List Field: ingredients
-
Recipe Rating Field: RecipeRating
-
Calorie Field: calories
β
Then link fields to your repeater.
The Dynamic Page
Create a dyanmic page: Recipes (Title)
β
Link fields on dynamic page to your database.β
THE CODE
Page Code
let debounceTimer;
export function search_keyPress() {
$w('#repeater1').expand();
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w('#search').value);
},200);
}
β
let lastFilterSearch;
function filter(search) {
if (lastFilterSearch !== search) {
$w('#dataset1').setFilter(wixData.filter().contains('RecipeName',search));
lastFilterSearch = search;
}
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
