Searching a Database / Displaying in Repeater

Ask the community
,
1

I’m trying to add a product search feature to my website, as the current standard Wix search feature searches the WHOLE website and lacks customisation.

I have tried multiple ways, but am struggling at the moment, due to lack of time and energy (a bad strain of the flu). However, I really need this working soon :frowning:

Can anyone lend a hand and help me out with the code?

What I need:

  • The search bar (#searchBox) to be able to search the database (#dataset1) for any word to match in the field key ‘name’.
  • For the search bar to work when ‘enter/return’ is pressed (no button).
  • For the search bar to then take customer from any page to the ‘search-results’ page (link below).
  • For the results to then be displayed within the repeater (#searchResults).

Example of my website, if you need to take a look:
https://kurious-katie.wixsite.com/website-1/search-results

If you need anymore information, please let me know :slight_smile:
Thanks in advance for any help!

2

You can achieve your goal by doing the following:

  1. Follow the example in this tutorial: https://support.wix.com/en/article/corvid-tutorial-adding-collection-data-search-functionality
  2. Use the onKeyPress event instead on button click: https://www.wix.com/corvid/reference/$w.TextInputMixin.html#onKeyPress
  3. Replace the table in the example with a repeater. You can find more information on how to display information on a repeater here: https://www.wix.com/corvid/reference/$w.Repeater.html#data
    Should you wish to display results on a different page, you can redirect to the page using wixLocation.to() . To learn more: https://www.wix.com/corvid/reference/wix-location.html#Location
3

I’ve had a little play (I’m not much of a coder), so please excuse if this is completely wrong.

Can you take a look and tell me how I would improve this?
I can’t seem to understand how to use the onKeyPress event for using ‘enter’ to search.
Also, can’t understand how to use the wixLocation.to() to work. I’m assuming I need to use “/localPageURL?queryParam=value:” but can’t understand how to search with the inputted word?

import {wixData} from 'wix-data';

$w.onReady(function () {
$w("#searchBox").show();
$w("#searchResults").show();
$w("#button3").show();
})

export function searchButton_click(event) {
// Runs a query on the "products" collection
wixData.query("dataset1") 
 // Query the collection for any items whose "Name" field contains  
 // the value the user entered in the input element
  .contains("name", $w("#searchBox").value)
  .find()  // Run the query
    .then((results) => {
        console.log("Dataset is now filtered");
 let repeaterItems = $w('#searchResults').data;
        $w("#searchResults").data = results.items;

    }).catch((err) => {
        console.log(err);
    });
    $w("#searchResults").expand(); 
   }

If you could help, I would be so grateful! :slight_smile: