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();
        }
    });
});

这是非常缓慢的, 因为它在500 divs 中运行, 并搜索每个搜索_ term 属性, 以查看是否输入搜索术语。是否有更好的或更快的方法可以做到这一点? 我甚至有兴趣使用更好的搜索机制。

我可以根据需要修改DOM

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

它是一个简单的 CSS 选择器 :

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

您可能需要逃离 search_term , 取决于它可能包含的内容。

Answer 2

var search_term = this.value;
$( .ticker_list > div[search-term*="  search_term +  "] ).show();

<强 > 注:

You better use data-* attributes to store "meta-data" for DOM elements, not creating your own attributes.
Don t overuse jQuery! you can get input value with this.value instead of $(this).val().
If it s an expensive operation, you will get a performance boost moving from the keypress event to change or at least keyup event.
If you need to improve your code even more, cache $(this), it can speed up you code a bit.

Answer 3

我想这速度会更快吗?

$( #div_search ).on( keypress , function(){
       var search_term = this.value,
           elems = document.getElementsByClassName( ticker_list )[0].children;
       for (i=0; i<elems.length; i++) {
           var search_value = elems[i].getAttribute( search_term );
           elems[i].style.display = (search_value.indexOf(search_term) != -1? block : none );
       }
});

"http://jsfiddle.net/adeneo/dhL/" rel="nofollow" >FIDDLE

Answer 4

我做了一个jsperf < a href="http://jsperf.com/queryselector-search-engine" rel="no follow" >这里

Jsfidle < a href=" "http://jsfidle.net/C9m2K/2/" rel="nofollow" >http://jsfidle.net/C9m2K/2/

Making some small optimizations such as not hiding or showing elements in a loop improved your speed a little, but still storing the search terms in javascript object was a lot faster.

你可以像这样建起它:

var searchArray = $( .ticker_list ).children( div ).map( function( elem ){
    return {
        value: $(this).attr( "search_term" ),
        elem: this
    };
}).toArray();

You should also not toggle hide and show in the loop, if a search term only matches once, then you are calling hide 499 times when you could have just hidden the previously shown elements.

$( #div_search ).keyup( function() {
    var previouslyShown = [],
        i, len = searchArray.length;

    return function(e) {
        var cur,
            searchTerm = $(this).val();

        $( previouslyShown ).hide();
        previouslyShown = [];
        for( i = 0; i < len; ++i ) {
            cur = searchArray[i];

            if( cur.value.indexOf( searchTerm ) >= 0 ) {
                $( cur.elem ).show();
                previouslyShown.push( cur.elem );
            }
        }

    };
}());

友情链接