How to Create a Search for Your Database

Hi Yoav,

I’ve tried your video tutorial and its not working for me. I tried to test the first step, when you make a preview, and its not working at all. Nothing happens at all. Can you review the code I’m using?
I send you some print screens also.

Best,
Bruno

import wixData from ‘wix-data’;

export function iName_keyPress(event, $w) {
filter($w(‘iName’).value);
}
function filter(Name) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘nomeTexto’, Name));
}

Hey, please do post questions as new posts instead of answers to this one in the future.

I think you will need to wrap you filter function using Datasets onready to take sure the dataset is ready to use.

Looking for help… Every version that I try of suggested code gives me the same issue. I can get the search to work as described. But, once the search fails (ie. no results), I can’t get the full or any results back even with a legit search. So if I accidentally spell something wrong, I have to refresh the page to start over.

Full code is posted in the following post but thought this might be a more relevant place to ask. Thanks in advance for your valuable time.

We tried using the code above, but only the search bar works. The dropdown list does not update at all. Can somebody help?

We coded dropdown search for “Continent”, but we want to make another search for "Field after the issue with “Continent” is solved.

Follow-up to my issue. Corrupt repeater. Had to recreate the repeater from scratch, but it’s working perfectly now.

Hello,

I have 2 questions/issue

  1. I am trying to implement the search feature on a concatenated field called fullName which combines firstName and lastName with a hook however the search isnt working on ‘fullName’

I am using the following hook/code to combine firstName and lastName from by members database

//function to concatinate member first name and last name
export function members_afterQuery(item) {
    item.fullName = item.firstName + " " + item.lastName;

 return item;
}

then following the code in this guide i have

import wixData from "wix-data";

$w.onReady(() => {
    loadOrganization();
});

let lastFilterTitle;
let lastFilterOrganization;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w('#iTitle').value, lastFilterOrganization);
    }, 500);
}

export function iAirport_change(event, $w) {
    filter(lastFilterTitle, $w('#iAirport').value);
}

function filter(title, organization) {
 if (lastFilterTitle !== title || lastFilterOrganization !== organization) {
 let newFilter = wixData.filter();
 if (title)
            newFilter = newFilter.contains('fullName', title);
 if (organization)
            newFilter = newFilter.contains('organization', organization);
        $w('#dataset1').setFilter(newFilter);
        lastFilterTitle = title;
        lastFilterOrganization = organization;
    }
}

function loadOrganization() {
    wixData.query('members')
        .find()
        .then(res => {
 let options = [{ "value": '', "label": 'All Organization' }];
            options.push(...res.items.map(organization => {
 return { "value": organization.title, "label": organization.title };
            }));
            $w('#iAirport').options = options;
        });

}

the search will not work with ‘fullName’ however, it will work if i change it to either ‘firstName’ or ‘lastName’. any ideas why?
Below is a screenshot of my membersDB


2. just like everyone else, the drop down isn’t working. it only shows ‘All Organization’, i have another column called ‘organization’ not captured in the screenshot

Hi Serena, did you ever figure out how to do this in a store? Thanks in advance!

@code-queen You just solved my problem!!! 2 data collections he’s using! I can not thank you enough! Another thing I figured out that could be stumping people is the difference between a field name and a field key in the Database, if you are using the name instead of the key it won’t work. I was not completely sure when to use one over the other so I just made sure they were the same. : )

Hi, regarding the reference to #dataset1 in the example code posted by Yoav, I’m not sure how to change this to be applicable to my particular site. Is #dataset1 something that every site has by default, or am I supposed to name it?

I am adding the search bar and filter drop down on a dynamic page to allow searching/filtering of results. The only dataset that I seem to have is one called #dynamicDataset. Is this the right one to be referring to in the code for searching and filtering?

Thanks!

Jason

Hi ! I don’t know what happened but after an update my dropdown list stopped working (i might have f**k it up by myself tho)

When i tried to fix it by myself :
I replaced return {“value”: categories.title, “label”: categories.title}; with return {“value”: categories.categories, “label”: categories.categories}; because it was now selecting the actual ‘Title’ field in the database, instead of the categorie field, and now it worked but without deleting the duplicates :frowning:

  • The search bar still works perfectly, it get filtered with the tags word i added in my ‘‘description’’ field
  • The dropdown filter do works, its just didnt deleted the duplicates

Here is my code :

import wixData from "wix-data";

$w.onReady(() => {
  loadCategories();
});

let lastFilterTitle;
let lastFilterContinent;
let debounceTimer;
export function search_keyPress(event, $w) {
 if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#search').value, lastFilterContinent);  
  }, 500);
}

export function dropdown_change(event, $w) {
  filter(lastFilterTitle, $w('#dropdown').value);
}

function filter(description, categories) {
 if (lastFilterTitle !== description || lastFilterContinent !== categories) {
 let newFilter = wixData.filter();
 if (description)
      newFilter = newFilter.contains('description', description);
 if (categories)
      newFilter = newFilter.contains('categories', categories);
    $w('#dataset1').setFilter(newFilter);   
    lastFilterTitle = description; 
    lastFilterContinent = categories;
  }
}

function loadCategories() {
  wixData.query('Freebies')
    .find()
    .then(res => {
 let options = [{"value": '', "label": 'All Categories'}];
        options.push(...res.items.map(categories => {
 return {"value": categories.categories, "label": categories.categories};
      }));
      $w('#dropdown').options = options; 
    });
}

And here is the database :
The ‘categories’ field is the one i want to filter with

Anyone have any idea why it did that? I don’t know what happened or what i did so its stop working properly…

Thanks in advance guys :slight_smile:

  • Kassy

“All Continents” drop down selection still rendering “null”. I know there were several in this post for this scenario. Did anyone resolve this?

Basically, everything in the tutorial works as @ Yoav (Wix) demonstrated except the “All Continents” from the drop down. When you select from a category back to the “All” you get nothing. My code is copied right from his at the beginning of this post. I have matched, double checked, everything you can imagine on the item IDs & my dataset. What am I missing? Please Help.

Yoav, this works perfecty and I’ve used it on multiple pages on my site! One question, is there additional code I can use to only display the first category from the dropdown? For instance, my dropdown has categories “week 1”, “week 2”…”week 6”. When the page first opens it displays all of the items on my repeater, even though I’ve set the dropdown to display “week 1” When i click “week 2” and then go back to “week 1” it displays the “week 1” items perfectly. Is there a way to display just the “week 1“ items when the page first opens? Thanks, also would love to have you take a look at my last post. would love to have your insight!

Anybody has this working on mobile? Works perfect for me on desktop, however, on mobile when you do a search it returns no results, the repeater goes blank.

Hello!
I just managed to make a search engine that searches for three different parameters(‘imeParfuma’, ‘stevilkaParfuma’ in ‘znamkaParfuma). The only problem is, if a visitor enters, say, two parameters, then there is no hit. (e.g. ‘‘imeParfuma’ + ‘stevilkaParfuma’) What should I change in the code?
import wixData from ‘wix-data’;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer){
clearTimeout(debounceTimer)
debounceTimer = undefined;
}
debounceTimer = setTimeout (() => {
filter($w(’#iTitle’).value);
}, 200);
}
let lastFilterTitle
function filter(title) {
if (lastFilterTitle !== title){
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘imeParfuma’, title)
.or(wixData.filter().contains(‘znamkaParfuma’, title))
.or(wixData.filter().contains(‘stevilkaParfuma’, title)));
lastFilterTitle = title;
}
}
Greetings,
Tomas

Hi there, is there anywhere to find a slightly simpler version of this?

I’m looking for code to enable a dropdown menu filter of dataset results. At the moment, I have a page with my repeater which lists all the items in the dataset. I would like two dropdown menus at the top to filter by Region or Price - essentially the same as the video is doing with Continent. This level of codling is a little beyond me though and I can’t separate the bits I need from those that I don’t - i.e. the search box code.

I’ve connected my dropdown lists to my datasets, so they show the options, but when I preview the page and select them, nothing changes on my repeater lists… any advice would be greatly appreciated please! Thank you very much.
Amanda.

HI FELIPE - CAN YOU PLEASE ASSIST ME!!! - I AM TRYING TO MODIFY THE CODE TO MY SITE BUT I GET ERROR MSG - CAN YOU PLLLEASE ASSIST ME!!!

Hi Yoav,

I am succeeded follow your tutorial to completed search bar, thank a lot.
by the way, i would like to know how to connect $w(“#input1”).value with url. I had try to edit in following but it not work, so please help to give me some advise or sample. thx

my url link:
/coverage?query= (key word)

import {local} from ‘wix-storage’;

import wixData from ‘wix-data’;

import wixLocation from ‘wix-location’;

export function searchButton_click() {

search(); 

let urlQuery = $w(“#input1”).value;
$w(“#dataset1”).setFilter(wixData.filter().contains(‘subTitle’, SearchValue).or(wixData.filter().contains(‘zone’, SearchValue).or(wixData.filter().contains(‘description’, SearchValue))));

let SearchValue = $w(“#input1”).value;
$w(“#dataset1”).setFilter(wixData.filter().contains(‘subTitle’, SearchValue).or(wixData.filter().contains(‘zone’, SearchValue).or(wixData.filter().contains(‘description’, SearchValue))));

}

bonjour a tous
j’ai besoin d’aide sur un code de rechercher entre deux dates et afficher le résultat dans un tableau

This forum is English only. Please repost your question in English.