Question

我有一个JS代码，用输入字段过滤列表。目前，过滤器区分大小写。例如，如果你有＆＃34; item1＆＃34;你必须输入要过滤的确切单词。

$(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/

Answer 1

您可以在比较之前将项目转换为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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

$(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

使用jQuery过滤列表

3 个答案: