javascript - jQuery match partial text of JSON object - Stack Overflow

admin管理员组

文章数量:1390728

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

Share Improve this question Follow edited Sep 15, 2012 at 22:47 Jack Guy asked Sep 15, 2012 at 22:25 Jack GuyJack Guy 8,52388 gold badges6060 silver badges8888 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

本文标签： javascriptjQuery match partial text of JSON objectStack Overflow