Jquery：在您键入时过滤下拉列表答案

【问题标题】：Jquery: Filter dropdown list as you typeJquery：在您键入时过滤下拉列表
【发布时间】：2009-04-01 18:55:29
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

我只是在寻找类似的东西，而最适合我需要的东西似乎是JQuery UI MultiSelect。它将多选框变成一个非常漂亮的双列表视图，并在主列表上进行实时过滤。

编辑：新发展！

“Chosen 是一个 JavaScript 插件，它使长而笨重的选择框更加用户友好。它目前有 jQuery 和 Prototype 两种风格。”

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

【讨论】：

+100 分！ MultiSelect 正是我一直在寻找的插件！
@Mark 查看Chosen;它似乎比 MultiSelect 好得多。
好发现，这个插件是老大。
小部件不允许多选（即，按住 shift 并单击以选择一系列项目，根据组合框的原始功能），这是不幸的。
@EdBrannin 你觉得Select2 是基于Chosen 的吗？

【解决方案2】：

Select2 是 Chosen 的一个相当新的分支，具有更多功能（例如 AJAX + 用于单个项目的自定义 HTML）。

【讨论】：

【解决方案3】：

几年前我写了a little script to do this。很可能，它可以很容易地打包为 jQuery 插件。不客气。

如果您想查看那里的代码，我也在我的PHP Function Reference Dashboard 小部件中执行此操作。

【讨论】：

这正是我所追求的。您介意有人将其打包为 JQuery 插件并分发吗？我正在考虑下个月发布一些插件，这将是一个很好的。
去吧。如果可以的话，也许可以链接回源中的原始页面？
是的，如果它发布了！自年初以来，我一直在等待大量代码，我一直打算将这些代码作为 JQuery / 原型插件发布。
最佳答案，最佳脚本！这也适合多选选择列表的需要。太棒了！

【解决方案4】：

检查这些插件：

【讨论】：

【解决方案5】：

jQuery autocomplete 插件

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

【讨论】：

这个插件最后一次更新是一年多以前（2008 年 1 月）； i-net 时间有点长。
据我所知，它在所有浏览器上都能完美地完成这项工作——而且我已经在生产中得到了它。现在你让我有点担心......
它是过滤列表还是仅根据输入创建列表？
@Andrew，是的，它可以，你只需要在传递给它的选项中定义它的行为。
这是最好的插件。

【解决方案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>

【讨论】：

简单的选择标签示例。

【解决方案7】：

尝试基于真实选择框并在选项文本中间匹配的“jquery 选项过滤器”： http://plugins.jquery.com/project/jquery_options_filter

为了自制

【讨论】：

链接好像坏了。

【解决方案8】：

我刚刚快速而肮脏地实现了这个功能。它使用了一些全局变量，您可能需要改进实现以删除这些变量。

这里的“#xsca_member_filter”是作为文本输入的过滤器，“#members”是选择输入。

$('documenet').ready(function(){
    init();
   $('#xsca_member_filter').keyup(function(){
       filter($(this));
   });
});

//save all available options with their values and the empty option.
init = function(){
    options = new Object();
    $('#owner option').each(function(){
        var obj = $(this);
        if(obj.attr("value") != "")
            options[obj.attr('value')] = obj.html();
        else
            emptyOption = obj.html();
    });
    selObj = $('#owner');
};

filter = function(elem){
    var filter = elem.val();
    var selected = $('#owner option:selected').val();

    //delete all options and add the empty option
    selObj.html("");
    selObj.append("<option> "+emptyOption+" </option>");

    //add all options conaining the filter string
    for(value in options){
        var option = options[value];
        if((options[value]).indexOf(filter) != -1){
            selObj.append("<option value='"+value+"'> "+options[value]+" </option>");
        }
    }

    //select the previously selected option
    $("#owner option[value = '"+selected+"']").prop("selected", true);
}

【讨论】：