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

Question

我想使用jQuery UI 中的多行自动完成组合框，但标签和选项描述都可搜索。或标签和值，但值必须对用户可见。

有什么办法吗？

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

Answer 1

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

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”