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

**URL:** <https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [November 14, 2022, 12:05pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626 "2022-11-14T12:05:50Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![dennis13419](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dennis13419/32/10873_2.png) [@dennis13419](https://forum.wixstudio.com/u/dennis13419)\
**Post date:** [November 14, 2022, 12:05pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/1 "2022-11-14T12:05:50Z")

</div>

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.

```javascript
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

        }

    }

```

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 15, 2022, 4:50pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/2 "2022-11-15T16:50:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dennis13419](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dennis13419/32/10873_2.png) [@dennis13419](https://forum.wixstudio.com/u/dennis13419)\
**Post date:** [November 15, 2022, 6:08pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/3 "2022-11-15T18:08:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 15, 2022, 7:19pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/4 "2022-11-15T19:19:47Z")

</div>

Try:

```javascript
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)

```

---

<div class="post-metadata">

**Author:** ![dennis13419](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dennis13419/32/10873_2.png) [@dennis13419](https://forum.wixstudio.com/u/dennis13419)\
**Post date:** [November 15, 2022, 9:29pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/5 "2022-11-15T21:29:06Z")

</div>

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 )

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 15, 2022, 11:40pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/6 "2022-11-15T23:40:51Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![dennis13419](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dennis13419/32/10873_2.png) [@dennis13419](https://forum.wixstudio.com/u/dennis13419)\
**Post date:** [November 22, 2022, 6:13pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/7 "2022-11-22T18:13:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 23, 2022, 12:15pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/8 "2022-11-23T12:15:22Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![dennis13419](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dennis13419/32/10873_2.png) [@dennis13419](https://forum.wixstudio.com/u/dennis13419)\
**Post date:** [November 23, 2022, 1:14pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/9 "2022-11-23T13:14:45Z")

</div>

and how can I combine that in your code? 😛

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 23, 2022, 8:05pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/10 "2022-11-23T20:05:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dennis13419](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dennis13419/32/10873_2.png) [@dennis13419](https://forum.wixstudio.com/u/dennis13419)\
**Post date:** [November 23, 2022, 8:31pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/11 "2022-11-23T20:31:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 23, 2022, 8:40pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/12 "2022-11-23T20:40:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dennis13419](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dennis13419/32/10873_2.png) [@dennis13419](https://forum.wixstudio.com/u/dennis13419)\
**Post date:** [November 23, 2022, 8:45pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/13 "2022-11-23T20:45:19Z")

</div>

One of then is good enough

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 23, 2022, 10:48pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/14 "2022-11-23T22:48:49Z")

</div>

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

```javascript
$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(' ')))
 })
})

```

---

<div class="post-metadata">

**Author:** ![harryhales77](https://avatars.discourse-cdn.com/v4/letter/h/ce7236/32.png) [@harryhales77](https://forum.wixstudio.com/u/harryhales77)\
**Post date:** [November 24, 2022, 7:25am UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/15 "2022-11-24T07:25:07Z")

</div>

Probably yes, but you should explain what exactly you’re trying to do in more details [.](https://financeinvestation.com)

---

<div class="post-metadata">

**Author:** ![dennis13419](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dennis13419/32/10873_2.png) [@dennis13419](https://forum.wixstudio.com/u/dennis13419)\
**Post date:** [November 25, 2022, 10:42am UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/16 "2022-11-25T10:42:55Z")

</div>

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.

```javascript
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);

    })

```

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 28, 2022, 9:22pm UTC](https://forum.wixstudio.com/t/searchbar-that-accepts-multiple-word-and-searches-each-word-in-the-database/10626/17 "2022-11-28T21:22:56Z")

</div>

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