Example: Search a Database

Show and tell
,
1

#Database #Collection #query #filter #debounce #dropdown #Example

1669×981 323 KB

Demonstrates

Links for this example

About this example

Add search functionality to your site by adding input elements to the page and then adding code to enable the search.

There are different ways you can let your users search your collection. This example uses the following input options:

  • Adding an input field where a user enters a search string.

  • Adding a dropdown where a user selects from a list.
    To add persistence to the user’s search, see the next Example: Saved Search .

For those of you wondering how to add another dropdown filter, it’s something like this:

export function iContinent_change(event) {
    filter(lastFilterTitle, $w('#iContinent').value, lastFilterCountry);
}

export function iCountry_change(event) {
    filter(lastFilterTitle, lastFilterContinent, $w('#iCountry').value);
}

function filter(title, continent, country) {
   if (lastFilterTitle !== title ||
       lastFilterContinent !== continent ||
       lastFilterCountry !== country) {
      let newFilter = wixData.filter();
      if (title)
         newFilter = newFilter.contains('articleTitle', title);
      if (continent)
         newFilter = newFilter.contains('continent', continent);
      if (country)
         newFilter = newFilter.contains('authorCountry', country);
      $w('#dataset1').setFilter(newFilter);
      lastFilterTitle = title;
      lastFilterContinent = continent;
      lastFilterCountry = country;
   }
}

Make sure you connect the dropdown components to the appropriate event handlers: iContinent_change() and iCountry_change().

9 Likes
2

Nice.

It would be awesome to be able to search 2 databases at the same time, in order to have a “general” search bar in the header.

3

Hey Tristan, nice idea. I’ll add this to my ever-growing list of examples to do. :beers:

4

Hi can you help me - I’m struggling to put the debounce in my code. https://pastebin.com/AKedikvx

The intention is being able to search the database either by city,state,price,name (title). I have the issue that the letters are cut in 1 in my log and the screen flickers a lot. Also searching for price seems to never work.

Can you help me? Also in a way that would be easy for me to know where to add more code without breaking it so I don’t need to ask for help again lol. I plan to add one more search on it “category”.

5

Looking forward for searching 2 or more database…

6

Is it possible to create a page and add code to search the Wix.com dashboard Members List? I would like to put a list of Members on my site with a different layout than the Members List app.

7

Hi, I’m having problems with the dropdown menu.
He does not appear the options he should. Can you help me find the problem? I would be grateful.

  • Name of the database with the items is (AnimeList)
  • the field that will be searched is:

  • The database with the filters is (LGorDBanime)
  • field of reference (title)

  • Search box id is (iTitle)
  • the ID of the dropdown menu is (LGorDB)

So this is the current state of my code:

import wixData from "wix-data";

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

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

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

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

function loadLGorDBanime() {
    wixData.query('LGorDBanime')
        .find()
        .then(res => {
 let options = [{ "value": '', "label": 'Legendado e Dublado' }];
            options.push(...res.items.map(tipoDeEpisodio => {
 return { "value": tipoDeEpisodio.title, "label": tipoDeEpisodio.title };
            }));
            $w('#LGorDB').options = options;
        });

}

Sorry for the size of the comment. I’m really bad at summarizing everything.
The code I used before trying this new one was inefficient and conflicted with the dropdwon menu.

8

Please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor.

9

@yisrael-wix Hi, is on this page: https://vortex-club.wixsite.com/website/test-pesquisa
Thank you for your help.

10

@vortex-club It seems to work for me:

11

If it doesn’t work in Live mode, did you sync your database:

12

@yisrael-wix
I’m sorry, but you visited the wrong page hahaha
they are identical, the only difference was the code and her name.
I added a button to differentiate the two now.

1007×489 107 KB

The page is named (test pesquisa)
I’m sorry for confusing you.

13

@vortex-club That’s the page I looked at:


If that’s not the page, then you need to tell me the correct page.

14

@yisrael-wix
yes it is this page, I just synchronized the database and publish, and also tested in 3 other browsers and for me the options are not displayed, I’m stumped.

15

@vortex-club It works for me.

16

@yisrael-wix
I will try to redo everything from the beginning and see if the problem continues

17

@yisrael-wix
The editor is joking with me hahahaha
The function works in the preview version perfectly but it does not work in the online version hahaha

18

@vortex-club The database doesn’t seem like it was synced - it’s empty.

839×309 11.9 KB

19

I do not believe a little thing like that gave me problems.
I’m embarrassed.
Every time I opened the database I would stuff the items there and it gave me the wrong impression.
haha
Thank you for helping me find the problem and sorry for anything @yisrael-wix .

20

@vortex-club I’m glad it’s working.