CODEWITHSUNDEEP
javascriptjquerysearchfilteringfrontend
AlexPixel
AlexPixel

Reputation: 439

How to filter a string with multiple words in any given order for javascript?

I have a simple filter for the alt attribute in <img>. I put and <INPUT>. everything works when I search for one word,but when I type another word that is the same "alt" it doesn't show anything. Example alt = "pyramid green"

  1. if I type GREEN it shows the picture
  2. if i type PYRAMID it shows the picture

  3. if I type PYRAMID GREEN it shows the picture

    4. if I type GREEN PYRAMID it DOESN'T SHOW anything

what I want to is to search any given word inside the alt attribute in any given order. thanks for the help.

function search() {
var filter =  $('input').val().toUpperCase();
var li = $('li');
var a = $('a');
for (i = 0; i < li.length; i++) {
    a = li[i];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1 ) {    
        li[i].style.display = '';

    } else {
        li[i].style.display = 'none';

    }
}

}

Upvotes: 0

Views: 3774

Answers (1)

Mario Santini
Mario Santini

Reputation: 3003

You should split the filter string on spaces, as now you search the whole string.

So your code will be:

function search() {

    var filter =  $('input').val().toUpperCase().split(' ');
    var li = $('li');
    var a = $('a');
    for (var i = 0; i < li.length; i++) {
        a = li[i];
        var text = a.innerHTML.toUpperCase();
        for(var f = 0; f < filter.length; f++) {
            if (text.indexOf(filter[f]) > -1 ) {    
                li[i].style.display = '';
                break; // don't need further matches
            } else {
                li[i].style.display = 'none';
            }
        }
    }

}

Upvotes: 1

Related Questions