Vorbly Code | WIX CUSTOMIZED SEARCH BAR USING REPEATERS

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

1/3

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.

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

2

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

2

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

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP