Question

我想从jQuery UI中使用multirow autocomplete combobox，但可以搜索选项的标签和说明。或者标签和值，但是必须为用户显示值。

有什么办法吗？

更新：此外，显示（可能是可滚动的）所有选项列表的按钮（向下箭头）也很不错。

Answer 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”或“界面”

jQuery自动完成组合框，带有可搜索标签和选项说明

1 个答案: