Question

我有一个包含超过3000个具有唯一名称的项目的列表。它们都包含在UL标签中，如下所示：

<ul>
    <li><a href="#"> Item_ID125167</a></li>
    <li><a href="#"> Item_ID146324</a></li>
</ul>

然后我有一个像这样的搜索输入：

<input type="text" id="searchfield" class="form-control" placeholder="Search">
<span class="input-group-addon">
    <button type="submit" id="searchButton" onclick="filterByName()">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</span>

最后一个隐藏/显示匹配项的功能：

function filterByName() {
  $("li").each(function(index) {
    if ($(this).children('a').text().toUpperCase().indexOf($("#searchfield").val().toUpperCase()) > -1) {
      $(this).css('display', "");
    } else {
      $(this).css('display', "none");
    }
  });
}

使用旧式安卓手机时，超过3000种物品感觉有点慢。搜索功能是否有更好的解决方案？

Answer 1

在这种情况下，我测试find的效果会比children更快您可以使用Test selectors自己运行它，或者查看结果：。

如果您的眼睛没有任何改善，您可以使用我添加到您的功能中的console.time查看结果，它会记录操作所花费的时间到浏览器。

function filterByName() {
 //Instead of selecting the search field + getting it's value + toUpperCase 
 //*3000 times this way it will only happen once.
 var searchVal = $("#searchfield").val().toUpperCase();

//measures the time it takes for the operation
 console.time("test");
 $("li").each(function() {

    //find is faster than children
    if ($(this).find("a").text().toUpperCase().indexOf(searchVal >-1)) {
        this.style.display = '';
    } else {
        this.style.display = 'none';
    }
});
//Will write to the console the time it the operation took.
console.timeEnd("test");
}

Answer 2

加快速度意味着你应该尽可能多地重用资源

var $list = {}; // initialize an empty global scope variable to keep your elements in
function filterByName(searchString) {
  //reusing $list will prefent you from walking the dom each time
  $list.each(function(index, el) {
    el.style.display = el.title.indexOf(searchString) > -1 ? "list-item" : "none";
  });
}

function loadList() {
  $list = $('#results').find('li'); //faster than $('#results > li');
  $list.each(function(index, el) {
      //save the uppercase search values in a propery to search faster
      //this saves you from running .toUpperCase() on every search
      var text = el.textContent || el.innerText;
      el.setAttribute('title', text.trim().toUpperCase()); //using title makes a faster search later
      $list[index]=el;
  }); 
}

$(function() {
    loadList();
  $('#searchButton').click(function(e){
    e.preventDefault();
    //prepariung the search sring here saves processing during search
    filterByName($("#searchfield").val().trim().toUpperCase());
    return false;
  });
  //if your list is build dynamicly simple run loadList() every time changes to the list content may happen
});

看到一个工作小提琴 https://jsfiddle.net/q1x7ujex/

Answer 3

我希望这段代码能比你的代码快一点。试试吧

function filterByName() {
    var searchVal = $("#searchfield").val.toUpperCase();
    $("li").each(function() {
        if (this.children[0].textContent.toUpperCase().match(searchVal)) {
            this.style.display = '';
        } else {
            this.style.display = 'none';
        }
    });
}

Answer 4

相应的页面：https://learn.jquery.com/performance/optimize-selectors/

您使用find代替children（它说超快）

您可以做的其他事情是从该列表创建一个数组并使用jQuery.inArray

加快jQuery / Javascript搜索功能

4 个答案: