1 
$('#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 个 div 并搜索每个“search_term”属性以查看输入的搜索词是否在 attr 中。有没有更好或更快的方法来做到这一点？我什至对更好的搜索机制感兴趣。

我也可以根据需要修改 DOM。

编辑 对不起我应该提到说搜索词是“你好今天约翰尼”，“你好”、“今天”和“约翰尼”这个词必须返回 true，这就是我在上面的脚本中使用 indexOf 的原因。

4

4 回答 4

5

这是一个简单的 CSS 选择器：

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

不过，您可能需要逃脱search_term，具体取决于它可能包含的内容。

于 2012-05-27T21:04:53.687 回答
1 
var search_term = this.value;
$('.ticker_list > div[search-term*="' search_term + '"]').show();

笔记：

  • 您最好使用data-*属性来存储 DOM 元素的“元数据”，而不是创建自己的属性。
  • 不要过度使用 jQuery！this.value您可以使用而不是获取输入值$(this).val()。
  • 如果这是一项昂贵的操作，您将获得从keypress事件转移到change或至少是keyup事件的性能提升。
  • 如果您需要进一步改进代码，缓存$(this)，它可以加快您的代码速度。
于 2012-05-27T21:05:01.427 回答
0

我假设这更快？

$('#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');
       }
});​

小提琴

于 2012-05-27T21:33:29.183 回答
0

我在这里做了一个jsperf

jsfiddle http://jsfiddle.net/C9m2K/2/

进行一些小的优化，例如不隐藏或显示循​​环中的元素，稍微提高了您的速度，但仍然将搜索词存储在 javascript 对象中要快得多。

你可以像这样构建它：

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

你也不应该在循环中切换隐藏和显示，如果一个搜索词只匹配一次，那么你调用了 hide 499 次，而你本来可以隐藏之前显示的元素。

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

    };
}());
于 2012-05-27T22:05:59.277 回答