jquery - 検索可能なラベルとオプションの説明を含む jQuery オートコンプリート コンボボックス

Question

jQuery UI から複数行のオートコンプリート コンボボックスを使用したいのですが、オプションのラベルと説明の両方を検索できます。またはラベルと値ですが、値はユーザーに表示される必要があります。

それを行う方法はありますか？

更新：すべてのオプションのリストを表示する（おそらくスクロール可能な）ボタン（下向き矢印）もいいでしょう。

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」または「インターフェース」を検索してみてください