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
Create your customized search bar by adding a container box, user input field and search icon.
Next, add a Wix Repeater with a text element and an invisible button. Then add the Wix Code to your webpage to filter data from your database.
When visitors click on the search results, they will be directed to the respective dynamic pages.
Create your customized search bar by adding a container box, user input field and search icon.
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.
Please complete all required fields.
No comments. Be the first to leave a comment.
Great code. Works brilliantly! One thing... how can I collapse the repeater after I backspace (delete) my search word. The repeater still shows the database content. (unfiltered)
Justin
Apr 14, 2019
4
hi guy, on this page
https://www.vorbly.com/Vorbly-Code/WIX-CUSTOMIZED-SEARCH-BAR-USING-REPEATERS?lightbox=dataItem-jip2do70_items_1
you did explain how to look for an item basing the research on one single value.
But, what if the value would be two (name and surname for example)?
Luca
May 18, 2019
3
Hi Luca,
Thank you for commenting here.
You can refer to our Wix Code Tutorial on product filters to learn how to look for an item based on two values (e.g. name and surname).
https://www.vorbly.com/Vorbly-Code/WIX-CODE-E-COMMERCE-PRODUCT-FILTERS
An alternative is to concatenate both values (e.g. JohnSmith) into a new field in your dataset and filter by a single value.
I hope this helps!
Andrew (Vorbly)
May 27, 2019
1
I get error parse symbol ~ before let last filter search can you let me know what is this issue
Pietro Giordano
Jan 18, 2020
0
Thaks for this!!
Jess
Sep 03, 2020
0