带有可搜索标签和选项描述的 jQuery 自动完成组合框答案

【问题标题】：jQuery autocomplete combobox with searchable label AND description of option带有可搜索标签和选项描述的 jQuery 自动完成组合框
【发布时间】：2012-10-01 01:10:49
【问题描述】：

我想使用 jQuery UI 中的 multirow autocomplete combobox，但标签和选项描述都可搜索。或者标签和值，但值必须对用户可见。

有什么办法吗？

更新：还有按钮（向下箭头）来显示（可能是可滚动的）所有选项的列表会很好。

【问题讨论】：

我尝试了一些示例并浏览了他们的代码。我还阅读了自动完成的文档，但我找不到一种方法来做我想做的事。
过滤是在服务端完成还是在客户端完成？我认为您应该发布一些代码，看看我们是否可以提供帮助。
我想过滤是客户端的，因为只有大约。最初从 DB 加载的 100 个选项元素。正如我之前所写，我还没有任何特定的代码可以保留。我只研究了网上和 jQueryUI 网站上发布的不同示例。

标签： jquery jquery-ui autocomplete combobox jquery-ui-autocomplete

【解决方案1】：

这绝对是可行的。调整您链接到的答案，以下是您如何通过每个项目的 desc 属性以及 label 属性进行搜索。此示例还包含一个显示所有项目的 jQueryUI 按钮 (#showall)。

JavaScript：

$(function() {
    var projects = [ /* ... */ ];

    $("#showall").button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    })
        .removeClass("ui-corner-all")
        .addClass("ui-corner-right ui-combobox-toggle")
        .on("click", function () {
            $("#project").autocomplete("search", "");
        });


    $("#project").autocomplete({
        minLength: 0,
        source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            /* Search by description or label: */
            response($.grep(projects, function(value) {
                return matcher.test(value.label || value.value || value) || 
                    matcher.test(value.desc);
            }));
        },
        focus: function(event, ui) {
            $("#project").val(ui.item.label);
            return false;
        },
        select: function(event, ui) {
            $("#project").val(ui.item.label);
            $("#project-id").val(ui.item.value);
            $("#project-description").html(ui.item.desc);
            $("#project-icon").attr("src", "images/" + ui.item.icon);

            return false;
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
    };
});

HTML：

<div class="ui-widget">
    <label>Your preferred programming language:</label>
    <span class="ui-combobox">
        <input id="project" type="text" class="ui-combobox-input ui-state-default ui-widget ui-widget-content ui-corner-left" /><a id="showall" tabindex="-1" title="Show All Items"></a>
    </span>
</div>

示例： http://jsfiddle.net/J5rVP/4/

尝试搜索“CSS”或“interface”

【讨论】：

太棒了！我不知道我怎么看不到！谢谢！