In this tutorial, I have explained how to create a search for your database using wix code (AKA Corvid) and repeaters.

Create a Database Collection – https://bit.ly/3auTT0m

Link to CODE – https://bit.ly/2E8QYP7

Follow me on social media; Facebook: @walterodibi Instagram: @odibiwalter Twitter: @walter_nich

What you Need

Wix collection

  • Name your Database collection
Corvid: Adding and Deleting an External Database Collection | Help ...
  • Start creating fields for your database
About Your Content Collection Fields | Help Center | Wix.com
  • Add content to your database fields
About Your Content Collection Fields | Help Center | Wix.com

Repeaters

  • Drag and drop a repeater from the WIX element section and design it to your taste.
  • Connect repeater to Dataset
That One Thing to Fix All Your Repeater & Pagination Problems - M ...

Search form

  • Add an input field

Code

import wixData from 'wix-data';
 
let debounceTimer;
export function searchbar_keyPress(event, $w) {   //enable onKeypress for input form on your website
    if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w("#searchbar").value);     //Change "#searchbar" ID of the input form to the ID of your input form
    }, 200);
 
}
 
let lastFilterSearch;
 
function filter(search) {
    if (lastFilterSearch !== search) {
        $w("#dataset1").setFilter(wixData.filter().contains('producttype', search));  // Replace "#dataset1" ID of the dataset to your dataset ID
        lastFilterSearch = search;// Replace 'producttype to the field key of the database field you wish to search, mine is title field'
    }
 
}

Tutorial Video

Watch & subscribe to our YouTube videos for more helpful videos like this.

https://www.youtube.com/watch?v=x57MLkH9gw0

Leave a Reply

Your email address will not be published. Required fields are marked *