Question

$('#div_search').keypress(function() {
    var search_term = $(this).val();
    $('.ticker_list').children('div').each(function() {
        var search_value = $(this).attr('search_term');
        if (search_value.indexOf(search_term) >= 0) {
            $(this).show();
        }
        else {
            $(this).hide();
        }
    });
});​

This is really slow, which makes sense since its running through 500 divs and searching each ‘search_term’ attribute to see if inputed search term is in the attr. Is there a better or faster way to do this? I am even interested for better search mechanisms.

I can modify the DOM, as needed as well.

EDIT
Sorry I should have mentioned that say the search term is “hello today johnny”, the term “hello”, “today” and “johnny” would have to return true, this is why I was using indexOf in the script above.

Answer 1

It’s a simple CSS selector:

$(".ticker_list > div[search_term*="+search_term+"]")

You may need to escape search_term though, depending on what it may contain.