Searching with Jquery - Work for multiple terms

Question

I found this great snippet online for a searchable FAQ. However, I was wondering if anyone knew how it could be modified to work with multiple terms.

http://jsfiddle.net/pT6dB/

On the example above, I would like to be enter "paper Earth" to have both example results returned. If I enter that now, it doesn't return anything. I guess I want to make it equivalent to searching "paper" OR "Earth".

Any help would be much appreciated.

James

Answer 1

What you can do is matching the search string against a regular expression to get all words. Then, for each li you check whether its text contains any of the words and show or hide appropriately. I've used array.some which is only available on newer browsers, though.

I've tidied it up a bit as well - not all code was necessary: http://jsfiddle.net/pT6dB/29/ .

// no need for preventDefault here - clicking a <strong> doesn't do anything
$('li strong').click(function(e) {
    $(this).parent().find('em').slideToggle();
});

// the "input" event is available on newer browsers, and is also fired when e.g.
// pasting or dragging text
$('#search').on("input", function(e) {
    // make it case-insensitive, and match against a regexp that matches
    // non-space characters
    var words = $(this).val().toLowerCase().match(/\S+/g);
    if (!words) {  // no match, i.e. no words found
        $('#result li').show();
    } else {
        $('#result li').each(function() {
            var text = $(this).text().toLowerCase();
            var show = words.some(function(word) {
                return ~text.indexOf(word);  // ~ with indexOf means "contains"
            });
            $(this).toggle(show);  // will show or hide depending on "show"
        });
    }
});

Answer 2

You need to split the value by the " " character using the javascript string.split function. Then loop through each element to see if there is a match.

For example:

 $('#search').keyup(function(e) {
        var s = $(this).val().trim();
        if (s === '') {
            $('#result LI').show();
            return true;
        }

        $('#result LI').hide();

        splits = s.split(" ");

        for(x in splits){
            $('#result LI:contains(' + splits[x]+ ')').show();
        }

        return true;
    });