searchbar that accepts multiple word and searches each word in the database

Ask the community
,
1

hi there
is it possible to have a searchbar that accepts multiple words and filters a repeater depending on the words that are entered in the searchbar?

at this moment i have a searchbar that only accepts 1 word that is looked up in 3 different columns of a database.

function filter(search) {
        if (searchWord !== search) {
            $w("#dataset1").setFilter(wixData.filter().contains('category', search)
                    .or(wixData.filter().contains("questions", search))
                    .or(wixData.filter().contains("explenation", search))
                    //Insert more field filter here ====> here <====
                )

                .then(countItems)
            searchWord = search

        }

    }
2

Probably yes, but you should explain what exactly you’re trying to do in more details.

3

for example, i have a database with 3 columns, category1, questions & explanations.
i want to do a search with multiple keywords separated by a space.

so for example: “iphone price”

so then it will search all the columns and check if one of these keywords is found in the values in one of these columns. and filter the repeater on these values.

4

Try:

const fields = ['category', 'questions', 'explanations'];
const keywords = search.split(' ').map(e => e.trim()).filter(e => e);
let filters = [];
fields.forEach(field => {
keywords.forEach(word => {
filters.push(wixData.filter().contains(field, word));
})
})
const filter = filters.reduce((a,b) => a.or(b));
$w("#dataset1").setFilter(filter)
5

could it be that there is an issue with the last part.
a & b are not recognized.

const filter = filters . reduce (a, b => a . or (b)); $w ( “#dataset1” ). setFilter ( filter )

6

Sorry, put the (a,b) in parentheses:

const filter = filters.reduce((a,b) => a.or(b));
7

is is possible to combine this with e dropdown filter? i tried this with the standard filter that can be used in editor x but that does not work.

It would be nice that you can combine both. if people first select a category and then search through these results. and also the other way around.

8

Yes, you can combine it with any input type you want (checkbox, radio button, textinput, switch, selection tags, dropdown etc…).
Just take the input and filter the dataset based on the value(s).

9

and how can I combine that in your code? :stuck_out_tongue:

10

It depends - do you want to filter it on each dropdown selection, or you’d rather run it on “Search” button click.
You should add these details.

11

So like I told before.
It should be 2 directional. It they start typing keywords in the search bar followed by the selection in the drop-down or the other wat around.

12

Do they need both dropdown AND text input or just any of them is sufficient to start searching?

13

One of then is good enough

14

You used function filter(search) that gets the search argument, So you need to update the search argument. For example:

$w.onReady(() => {
 const inputs = [
  {id: 'searchInput', type: 'txt'},
  {id: 'dropdown1', type: 'drpdwn'},
  {id: 'dropdown2', type: 'drpdwn'}
 ];
 inputs.forEach(e => {
  $w('#' + e.id)[type === 'txt' ? 'onInput' : 'onChange'](() => filter(inputs.map(v => $w('#' + v.id).value).join(' ')))
 })
})
15

Probably yes, but you should explain what exactly you’re trying to do in more details .

16

hi

sorry i cant figure this out. the search argument I’m using is shown below. i would like to keep the search while typing.

thank you in advance for all the help. I really appreciate it.

let debounceTimer;

$w.onReady(() => {

    $w("#searchBar").onKeyPress(function () {

        $w("#clearFilter").show();

        $w("#searchBar").value;

        if (debounceTimer) {
            clearTimeout(debounceTimer);
            debounceTimer = undefined;
        }
        debounceTimer = setTimeout(() => {
            filter($w("#searchBar").value);
        }, 200);

    })
17

When you use my code, and just put the input ids there, + add the filter function from your first post, doesn’t it work?