I'm doing a live search results feature for my website. I have a JSON object containing key terms that I'd like to match the value of an input to.

The best solution I could think of for this was to iterate through each term in a loop and look for a partial matches with a jQuery selector. How can I make an if statement like this? For example:

$.getJSON('jsonfile.json', function(data) {
    key = Object.keys(data);
    for(i=0;i<key.length;i++)
    {
        if($(input[value]:contains == key[i].term)
        {
            //do something
        }
    }
} 

EDIT: My apologies for being unclear. I'm using the :contains selector for partial matches on the value of one input.

I'm doing a live search results feature for my website. I have a JSON object containing key terms that I'd like to match the value of an input to.

The best solution I could think of for this was to iterate through each term in a loop and look for a partial matches with a jQuery selector. How can I make an if statement like this? For example:

$.getJSON('jsonfile.json', function(data) {
    key = Object.keys(data);
    for(i=0;i<key.length;i++)
    {
        if($(input[value]:contains == key[i].term)
        {
            //do something
        }
    }
} 

EDIT: My apologies for being unclear. I'm using the :contains selector for partial matches on the value of one input.

• javascript
• jquery
• json
• contains

2 Answers 2

You need to build out the :contains selector as a string:

if($('input[value]:contains("' + key[i].term + '")').length) {
    //do something
}

The selector will return all elements where the input contains the term; adding .length provides an easy "truthy" value for the if-statement to evalulate (0 items returned == "false" and >0 items returned == "true").

EDIT: I'm not sure if input[value]:contains() is a valid jQuery selector, because I don't know what text :contains() looks at on an input element. You might need to help it out a bit by checking the value of each input yourself. You can filter the inputs found down to those where the value contains the term for which you're searching:

if ($('input[value]').filter(function() {
        return $(this).val().indexOf(key[i].term) != -1;
    }).length) {
    //do something
}

One thing you could to if you have very little items (say, a few dozen) is create a regular expression matching any of them:

var match = keys.join("|")
var regexp = RegExp.new(match, 'i') // Case insensitive
if($(input).val().match(regexp)) {
    // do stuff
}

Yes, I know this does not search for any input matching the terms, you'd have to know the input element up front, but from your question I assume you want to check a single input element.

Don't know if its faster than looping over all terms and checking one by one, but I think it is and it's definitely more readable.

This can be used in conjunction with jQuery's grep or each methods:

var match = keys.join("|")
var regexp = RegExp.new(match, 'i')

// With grep
var matches = $('input').grep(function(elem, idx) {
    return $(input).val().match(regexp) != null;
})

// Or with each
$('input')..each(function(idx, elem) {
    if ($(input).val().match(regexp) != null) {
        // Do stuff
    }
});

The grep selects all input fields that match any of the search terms for later use, and the each iterates over all elements to operate on them immediately.