Search with an array of strings in jQuery

Question

In jQuery I'm trying to build a search function. In an input field an user types a string and each word will be put in the variable searchedWords.

The following user search input string:

foo bar

would convert to

let searchedWords = ['foo', 'bar'];

Now with jQuery I want to search on all strings from the array. All words need to be inside the text of the div with class '.item'. I have managed to make this with a single search string. So that

let searchedWords = 'foo bar';

But that would only match if the div .item text would be foo bar baz and not foo baz bar.

jQuery

let divs = $('.item');
let searchedWords = ['foo', 'bar']; 

results = divs.filter(function() {
    return $(this).text().toLowerCase().indexOf($.trim(searchedWords.toLowerCase())) >= 0;
});

HTML

<div class="item">foo BAZ bar</div>
<div class="item">bar</div> 
<div class="item">baz/div>

Expected result would be

<div class="item">foo BAZ bar</div>

Actual result

no results...

As the user can search on a a string with more words (dynamic) I can't simply hardcode

$(this).text().toLowerCase().indexOf($.trim(searchedWords[0].toLowerCase())) >= 0 && 
$(this).text().toLowerCase().indexOf($.trim(searchedWords[1].toLowerCase())) >= 0

// ... etc

So I'm not sure how to search on multiple words with the jQuery filter function.

The found elements must contain ALL the words?

Jamiec
– Jamiec

2019-12-02 11:09:56 +00:00
Commented Dec 2, 2019 at 11:09 — Jamiec
– Jamiec, Commented Dec 2, 2019 at 11:09
@Jamiec Yes the found elements should contain all words.

Lars Mertens
– Lars Mertens

2019-12-02 11:10:52 +00:00
Commented Dec 2, 2019 at 11:10 — Lars Mertens
– Lars Mertens, Commented Dec 2, 2019 at 11:10

Jamiec · Accepted Answer · 2019-12-02 11:19:26Z

2

You should use Array.every across the array of words and check the contents of the elements contain every word in the list.

let divs = $('.item');
let searchedWords = ['foo', 'bar']; 

var results = divs.filter(function() {
    return searchedWords.every( word => $(this).text().toLowerCase().indexOf(word) >= 0);
});    

console.log(results.html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">foo BAZ bar</div>
<div class="item">bar</div> 
<div class="item">baz</div>

edited Dec 2, 2019 at 11:19

answered Dec 2, 2019 at 11:13

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wsrt Over a year ago

The solution works if the values are default as in example above (<div class="item">foo BAZ bar</div>). How do I carry out the same search when a value (string) is input at runtime? For example, user keying in string sets in a blank input field. Thanks.

wsrt Over a year ago

Nope! I am sorry this doesn't seem to work. I keep getting error Uncaught TypeError: divs.filter is not a function at HTMLInputElement.. Could you please let me have some pointer to solve the riddle?

wsrt Over a year ago

Okay. I got it. As I was passing the value searchedWords as a list of words, and not as an array I was running into the aforesaid error. I had to change the list to an array. And it worked.

Collectives™ on Stack Overflow

Search with an array of strings in jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related