jQuery match partial text of JSON object

Question

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.

Cᴏʀʏ · Accepted Answer · 2012-09-15 22:39:50Z

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
}

edited Sep 15, 2012 at 22:39

answered Sep 15, 2012 at 22:28

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

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

1 Comment

Jack Guy Over a year ago

Is there a non case-sensitive version of contains?

Kamiel Wanrooij · Accepted Answer · 2012-09-15 22:55:11Z

2

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.

edited Sep 15, 2012 at 22:55

answered Sep 15, 2012 at 22:38

Kamiel Wanrooij

12.4k6 gold badges39 silver badges43 bronze badges

1 Comment

Kamiel Wanrooij Over a year ago

You can tweak the regexp to match any way you want. You could add word boundaries with \b, but it won't match partial hits of the original search terms. E.g. it will match 'ape' against an input containing 'grape', but not 'grape' with an input containing 'ape'. Ofcourse, with regular expressions, you can build that too ;-)

Collectives™ on Stack Overflow

jQuery match partial text of JSON object

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related