Jquery:键入时过滤下拉列表

Question

我使用了一个原型插件,可以在您键入时过滤下拉列表的内容.因此,例如,如果您在文本框中键入"cat",则只有包含子字符串"cat"的项目才会在下拉列表中保留为选项.

有谁知道一个jquery插件可以做到这一点？

Answer 1

我只是在寻找类似的东西,而我最需要的东西似乎是JQuery UI MultiSelect.它将多选框改为漂亮的双列表视图,并在主列表上进行实时过滤.

编辑:新发展!

" Chosen是一个JavaScript插件,它使长而笨重的选择框更加用户友好.它目前有jQuery和Prototype两种版本."

在可预见的未来,我完全在所有选择使用项目中使用Chosen.

Answer 2

Select2是Chosen的一个相当新的分支,并且具有更多功能(例如,针对单个项目的AJAX +自定义HTML).

Answer 3

几年前我写了一个小脚本来做这件事.它很可能很容易打包成jQuery插件.欢迎你.

如果你想查看那里的代码,我也会在我的PHP函数参考仪表板小部件中执行此操作.

Answer 4

检查这些插件:

• SexyCombo
• QuickSelect
• DropList过滤器

Answer 5

jQuery 自动完成插件

编辑:我最初链接到错误的自动完成插件.

Answer 6

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#filter *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h2>Filter</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<div class="filter-by">
  <span>Filter by:</span>
  <select class="status-filter" id="filter">
    <option value="">All</option>
    <option value="paid">Paid</option>
    <option value="accepted">Accepted</option>
    <option value="pending">Pending</option>
    <option value="rejected">Rejected</option>
    </select>
</div>