使用 jQuery 过滤列表答案

【问题标题】：Filter list using jQuery使用 jQuery 过滤列表
【发布时间】：2018-08-20 16:37:07
【问题描述】：

我有一个使用输入字段过滤列表的 JS 代码。目前，过滤器区分大小写。例如，如果您有“item1”，则必须输入要过滤的确切单词。

$(function(){

    $('input.search').keyup(function(){

        var searchText = $(this).val();

        $('ul.tabs-menu > li').each(function(){

            var currentLiText = $(this).text(),
                showCurrentLi = currentLiText.indexOf(searchText) !== -1;

            $(this).toggle(showCurrentLi);

        });     
    });

});

有什么办法可以优化吗？

这是一个链接：http://jsfiddle.net/EFTZR/897/

【问题讨论】：

currentLiText.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
如果你真的想做一个牛逼的搜索引擎，你也可以阅读“字符串搜索算法”：en.wikipedia.org/wiki/String_searching_algorithm
感谢 Myster X，它运行良好！
当你说“优化它”时你想要什么？例如，我在我的 anwser 中添加了一些视觉反馈，这是对您的优化吗？

标签： javascript jquery search filter

【解决方案1】：

这是一种干净且优化的方法（不区分大小写）：

$(function(){
    var timer;

    function search( searchText ) {
        $('ul.tabs-menu > li').each(function(){

            var $this = $(this),
                currentLiText = $this.text().trim().toLowerCase(),
                showCurrentLi = currentLiText.indexOf( searchText ) !== -1;

            $this.toggle( showCurrentLi );

        });
    }

    $('input.search').keyup(function(){
        var searchText = $(this).val().trim().toLowerCase();
        // Checks the value of searchText.
        if (searchText) {
            // Clears the timer.
            if ( timer ){
                clearTimeout(timer);
            }
            // Gives the user 1 second to finish typing.
            timer = setTimeout( search.bind(this, searchText ), 1000 ); 

        }

    });  
});

希望你喜欢：JSFiddle

【讨论】：

【解决方案2】：

我添加了一些视觉反馈以查看您在列表中查找的内容（使用与搜索功能的其他 anwser 相同的代码）并更改您的项目列表以更好地查看它。

$(function() {

  $('input.search').keyup(function() {

    var searchText = $(this).val().trim();

    $('ul.tabs-menu > li').each(function() {

      var currentLiText = $(this).text(),
        showCurrentLi = currentLiText.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;

      $(this).toggle(showCurrentLi);
      $(this).html(currentLiText.replace(searchText, "<span class='bold'>" + searchText + "</span>"))

    });
  });

});

.bold {
    font-weight: bold;
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="search" />

<ul class="tabs-menu" id="category1">
  <li>first item</li>
  <li>second item</li>
  <li>one more item</li>
</ul>
<ul class="tabs-menu">
  <li>item test</li>
  <li>check item</li>
</ul>

【讨论】：

【解决方案3】：

您可以在像这样比较之前将项目转换为lowerCase

$(function() {

  $('input.search').keyup(function() {

    var searchText = $(this).val();

    $('ul.tabs-menu > li').each(function() {

      var currentLiText = $(this).text(),
        showCurrentLi = currentLiText.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;

      $(this).toggle(showCurrentLi);

    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="search" />

<ul class="tabs-menu" id="category1">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<ul class="tabs-menu">
  <li>item27</li>
  <li>item28</li>
</ul>

【讨论】：