Question

我正在寻找一个示例，或者可能是一个方法，可以通过键入文本框的多个项目来过滤/搜索项目列表。

我们假设我有一个清单：

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   <li>Water</li>
   <li>Juice</li>
</ul>

我想要的是键入（在文本框中）例如：牛奶;水;果汁（用分号表示），返回三个项目。

$('li').filter(function() {
     ????
})

它可以是过滤器或其他jquery / js函数。

提前感谢您的任何帮助

编辑：

我忘了告诉它应该按最后一项的一部分进行搜索。例如Coffe; Te - ＆gt;回归咖啡和茶

Answer 1

这是实现这一目标的一种方法： -

$('input').keyup(function(){
   var search = this.value.split(';');
   $('ul li').each(function(index, element){
      $(element).toggle(search.indexOf($(element).text()) >= 0);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   <li>Water</li>
   <li>Juice</li>
</ul>

拆分;上的搜索输入并检查每个li的文本以查看它是否在数组中。

<强>更新

忽略大小写和部分匹配

$('input').keyup(function() {
  var search = this.value.split(';');
  $('div label').each(function(index, element) {
    var text = $(element).text().toLowerCase();
    var show = search.filter(function(e) {
      return e != '' && text.indexOf(e.toLowerCase()) >= 0;
    }).length > 0;
    $(element).toggle(show);
  });
});

div label {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<div>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Coffee" />Coffee</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Tea" />Tea</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Milk" />Milk</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Water" />Water</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Juice" />Juice</label>
</div>

Answer 2

试试这段代码：

$('input').on('keyup', function(){
  var val = $(this).val().toLowerCase();

  $('li').each(function() {
    var $this = $(this);
    var text = $this.text().toLowerCase();
    if ( val.indexOf(text) > -1 ) {
      $this.show();
    } else {
      $this.hide();
    }
  });
});

DEMO：http://jsbin.com/foqagadewo/edit?html,js,output

Answer 3

您可能需要修改Jquery自动完成功能才能为您https://jqueryui.com/autocomplete/

执行此操作

您还可以使用＆＃39; multiple＆＃39;创建HTML select元素。属性并将输入字符串推入数组，然后选择选项＆gt;中的项目。选项元素

Answer 4

您可以使用，这将返回匹配的li。

var items= textboxValue.split(";")
var a= $('ul li').filter(function() {
   return items.indexOf($(this).text()) > -1 ;
});

Answer 5

请检查Documentation

//bind chosen
$(".chosen-select").chosen({no_results_text: "Oops, nothing found!"});


$('.chosen-select').on('change', function(evt, params) {
    alert($(".chosen-select").val());
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
 
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>


<select id="searchBox" data-placeholder="Type &apos;C&apos; to view" style="width:350px;" multiple class="chosen-select chosen-select-no-results" tabindex="11">
            <option value=""></option>
            <option>Coffee</option>
            <option>Tea</option>
            <option>Milk</option>
            <option>Water</option>
            <option>Juice</option>
          </select>

Answer 6

你应该试试这个。请运行我想要显示的代码段和输入。

$(document).ready(function() {
});

function filterItems(thisobj) {
  $("ul li").hide();
  $("ul li").filter(function(i) {
    return ($(thisobj).val().split(';').indexOf($(this).text())> -1);
  }).show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" onchange="filterItems(this);" />
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
</ul>

如何按多个项目搜索/过滤列表？

6 个答案: