How to Create a Search for Your Database

Code Queen, this code is not working with repeaters…

Anyone else have a method for removing duplicates for this post’s video?

Andreas Kviby do you have way to eliminate duplicates that show up with this drop down method?

I went back to work from scratch an in looking at the video and then code posted…they do not match.

I’ve been trying out this code for a while, done and re-edited and I have this exact problem “All continents” does not appear anything! Managed to solve ? I saw that there was no response.

Hey Everyone

Totally new to all this and attempting to recreate this. I have renamed everything in my database to match the video and then copy and pasted the code (to ensure I’m doing it correctly).
I just want to ensure that he is simply searching the ‘articles’ database in the above video (I noticed there are multiple databases listed).
I’m using a simple repeater on a page and they show up and are linked to my database correctly. All the articles show up but once I type anything in the search bar everything disappears, and the drop down menu grey’s out when an option is clicked but doesn’t do anything. Clearly they are not communicating.
Any tips?

Hi Yoav - and thank you so much for the code.

Can anyone help with adding a further function? What I’d like to do is have a text element (“#noResults”) appear if the Title search and/or Continent dropdown filters yield no result.

I’d be grateful for any assistance.

Cheers

Hi :slight_smile:
Is this applicable to a store?
I mean, is it possible to add this feature to search out products in the wix store page?

Thank you!

Hello everyone,

I finally managed to get this done:
Search a database, through an input field search box.
Get the data on to a table.
Click the row and connect it to a dynamic page.

For a non-programmer, this was a big task.

Now how can I make the search box throw suggestions or do an autocomplete while a user is typing, taking data from the relevant field in the database?

For example, if there is a ORIGIN field and a DESTINATION field.

If a user is typing in Nashville. Is it possible that when he reaches ‘N-a-s-h’ the search box autocompletes it to ‘Nashville’?

This would be a big big help.

Thanks!

I have set up a search on a repeater that I have on my site. Everything seems to be working fine. Currently it is searching the “Surname” field of my database. What can I add to my code to have it search other fields in my database (eg. firstName, spouseName)?

Here is my current code:

import wixData from “wix-data”;
let debounceTimer;
export function iSearch_keyPress(event) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iSearch’).value, lastFilterSurname);
}, 500);
}
let lastFilterSurname;
function filter(surname) {
if (lastFilterSurname !== surname) {}
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘surname’,surname));
lastFilterSurname = surname;
}

Hi Yoav and all,

This video + code was really helpful and I followed it to a T when creating search elements for a database. I am running into trouble with my code when adding more than 2 search elements (1 key word search + 3 drop down searches). Could anything help me pinpoint where I went wrong when adding a 3rd drop down search? My code is posted here: https://www.wix.com/code/home/forum/community-discussion/error-in-adding-third-search-element-to-search-a-database

Thanks in advance,
Diana

I am NOT a coder but after some trial and error and help from a coder (Salman), the following worked like a charm for me.

Note: I only wanted the search field and so the following code does not include the dropdown menu part of this tutorial. Also, the following code is for searching multiple fields in my database.

Create your database, repeater, add dataset and connect your various database fields to your repeater elements. Then add a user input field for the search field.

For the user input field for the search box:

  • Be sure to add KeyPress under properties.

  • Also under properties, name the search field “eSearch”

Change “#dataset1” to whatever your dataset id is.
Change “databasefield1” databasefield2" etc. to the names of your database fields

Pay attention to the code note at the bottom behind the //.


import wixData from “wix-data”;

let debounceTimer;
export function eSearch_keyPress(event) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#eSearch’).value, lastFilterDatabasefield1);
}, 200);
}
let lastFilterDatabasefield1;
function filter(databasefield1) {
if (lastFilterDatabasefield1 !== databasefield1) {}
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘databasefield1’,databasefield1)
.or(wixData.filter().contains(‘databasefield1’ , databasefield1)
.or(wixData.filter().contains(‘databasefield2’ , databasefield1)
.or(wixData.filter().contains(‘databasefield3’ , databasefield1)
))));
//Add or remove a parenthesis above this line if you add or remove a search field line (the lines above the parenthesis).
lastFilterDatabasefield1 = databasefield1;
}

Hello everyone, I am new to wix and am having a time trying to learn to manipulate data.

I have created a Database named “States2”. Each row in this database contains six columns of data with the first column being the state name. I added a table to my page and I am trying to programmatically populate the table with the contents of “States2”. Ultimately, I would like to use a dropdown box to select the individual state row to display in the table. The below code successfully adds the column headings from the database, but the data is not populated.

========
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixData from ‘wix-data’;

$w.onReady( function () {
return wixData.query(“States2”)
.find()
.then((results) => {
$w(“#table1”).rows = results.items;
});
});

This is the result when I preview the page. Thanks for any assistance you can provide.

Lost so much of time tryin to make this thing works…(it still don’t…) Impossible to load anything in the dropdown list with the code, it stay completly empty. If i add the feilds manually in it it works, the filtering is happening, but the ‘‘All continents’’ choice don’t works (it show nothing). I feel like the video is so uncomplete, and it’s so hard to find help…

There is an other Database called continent in the video, have it ever been used ? (If not why is it there?..) How many Dataset are on the page ? Only one ? Have they add the choice of the dropdown manually and than only add the ‘‘All continent’’ by code, or all choices are suppose to load by themsleve, without duplicate in the list ?..caus none of it is working.

Please wix, i rather have a 30min video that is REALLY explaining thing properly rather than a 5:41min video that is rushing over every single important detail.

According to the comment here and on the Youtube video, the succes rate is really low. It is not normal, with a video like that you should expect at least 80-85% succes rate…

Perhaps posting screenshots of your code & elements will allow others to help point out where you need to change your code.

What also helps is explaining your exact use for the search filter so the community can offer different suggestions. For example, there was a member that tried to follow this search video when he only had 1 dropdown element. And that’s it. Just 1 dropdown element and he was trying to use this example to help him perform the search. So the community offered him solution and it worked for him. It wasn’t the fact that the video or code didn’t work, it was the fact that it wasn’t the best approach for him based on his coding experience and the exact use he wanted the search function for.

So how can I help you?

@code-queen Hi ! Thanks for answering :slight_smile:

I reread my message just before sorry if I sounded rude, i was extremly frustrated while writing it, i am just coming back from a brake now it is better ^^‘’‘’

So here is the site : https://www.kassyarts.com/copy-of-freebies

I am using the search bar and the dropdown exactly like in the video, (at first i only wanted the dropdown but finally searching by tag is also so usefull so i used both)

The search bar work no-problem (Since i already knew how it work, by using one of your video Nayeli, that usually are waaaaaay more detailed than the Wix ones!) I look if you had anything on dropdown but i only found two-dropdown tutorial or three-dropdown tutorial (not for when you need only one)

My database : (Only dataset added to the page, named ‘‘dataset1’’ by default)


(At first i had a database for each categories - i am testing with the Halloween database, but when the code will work, i am gonna create a single database contening all the freebies from all categories and will delete all the others unused databases)

Title : Not really used anywhere, just helping me in the back-end
Miniature : Picture that appear
File : Downloadable and printable PDF file of the coloring page
Date : Just for the filtering, to had them in date order, i don’t need the special date feild since i only care about the year
Categories : The categories that are suppose to show up in the dropdown list, but dosent (+ ‘‘All categories’’)
Description : List of tag-words for the research bar, that works perfectly

Dropdown ID : dropdown
Search bar ID : search
(I know, i am original!)

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(‘categories’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘All Categories’}];
options.push(…res.items.map(categories => {
return {“value”: categories.title, “label”: categories.title};
}));
$w(‘#dropdown’).options = options;
});

}

I am gonna rename ‘‘LastFilterTitle’’ by ‘‘LastFilterDescription’’ and
‘‘LastFilterContinent’’ by ‘‘LastFilterCategories’’ at the very end when the code will be working caus when i tried the first time my resault were even worst ^^‘’

Thanks in advance ! Sorry again if my other message sounded rude ^^‘’

@kassyarts So on the line where you have wixData.query(‘categories’) … the word ‘categories’ should be the name of your database collection. Based on your screenshot you have one called ‘Categories’ with a capital C and the ‘Halloween’ with a capital H. So your dropdown isn’t populating any options because the name of the database collection you entered (‘categories’) does not exist.

As I posted on Instagram the other day:

@code-queen omg thanks you it works !

So we DO need the second database that they never showed in the video, i thought that it was suppose to be the field from the main database that was going there (That why categories with a small c, becaus the categories field in the Halloween database is not capitalized, i tought it was this one)

In the video, they are using the ‘‘Article’’ database, but they didn’t used it in the code, to avoid having everything in double in the dropdown list right ? (If i use Halloween like i intended too, i have a lot of doubles, with the Categories database (that was just suppose to be a test and that didnt work the first time), Now, it is work perfectly !!)

Yup, thanks you so so much, not frustrated anymore, but i still think that the video from Wix is lacking a lot of informations.

You really make a much better job than them tho, I hope that Wix is paying you! :slight_smile: (If they don’t, they should.)

Thanks you sooooo so much!! :slight_smile:

(+1 follow on insta btw :slight_smile: )

I’ve spent the whole day trying to figure this out. It’s not working for me. I’m stuck at the first preview, where you enter something to try. Everything just disappear when I enter something in the first box… I’m using repeater.

Ehi, i have a problem using the dropdown. It works fine, unless i select one category in the dropdown. Then i cannot change my selection anymore.

Sorry for my english,
Nicola