Question

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

有没有人知道jquery插件可以做到这一点？

Answer 1

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

编辑：新发展！

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

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

Answer 2

Select2是一个相当新近的选择分支，具有更多功能（例如，针对单个项目的AJAX +自定义HTML）。

Answer 3

几年前我写了a little script to do this。它很可能很容易打包成jQuery插件。欢迎你。

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

Answer 4

检查这些插件：

Answer 5

jQuery autocomplete插件

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

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>

Answer 7

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

for diyism

Answer 8

我刚刚快速而肮脏地实现了此功能。它使用一些全局变量，您可能希望改进实现以删除它们。

这里'#xsca_member_filter'是过滤器作为文本输入，'＃mermbers'是选择输入。

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

Jquery：键入时过滤下拉列表

8 个答案: