2

選択機能またはフォーカス機能が応答するのにかなり苦労しています。結果を展開すると、選択で結果を殺すことさえできません。jQuery UI の特定のバージョンがメインの jQuery ライブラリと競合しているという記事をよく読みますが、どの組み合わせでも機能しないようです。さらに悪いことに、コンソールにエラーがスローされません。選択/フォーカスの下のすべてが正常に機能しているようです。各項目にいくつかの HTML を追加しています。私のアプリケーションでは、クラスに基づいて異なるスタイルを設定しています。select を使用して、入力自体の下に ui.item.label を使用して追加の HTML を追加したいと思います (タグ付けシステムのように)。その間、アラートを使用してトラブルシューティングを行っています。

これは、私の半作業コードを含むフィドルです。

http://jsfiddle.net/c3UM5/

$(function () {

var availableItems = [{
    value: "recent",
    label: "Recent",
    classN: "heading"
}, {
    value: "all",
    label: "All",
    classN: "all"
}, {
    value: "lorem",
    label: "Lorem",
    classN: "lorem"
}, ];

$(".post-to").autocomplete({
    source: availableItems,
    minLength: 0,
    focus: function (event, ui) {
        $('.post-to').val(ui.item.label);
        alert(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        alert(ui.item.label);
        return false;
    }
}).on("focus", function () {
    $(this).autocomplete("search", '');
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<span class='" + item.classN + "'></span><span>" + item.label + "</span>")
        .appendTo(ul);
  };

});
4

1 に答える 1

4

私はあなたがいくつかの小さな問題を抱えていると思います（非常に大きな結果をもたらします）

上書きする_renderItem関数では、要素に<span>タグを追加しようとしますが、それらをタグとして定義する必要があり<a>ます。

私updated jsfiddleのコードを見てください。

私はこれを変更しました：

$(".post-to").autocomplete()
    .data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            //instead of <span> use <a>
            .append("<a class='" + item.classN + "'></a><a>" + item.label + "</a>")
            .appendTo(ul);
};

アラートが正常に機能するようになりました。

この「制限」は、追加された要素を適切にスタイルするために行われたと思います。適用されるスタイルを見ると、それらは<a>タグに対して定義されています。お気に入り

.ui-menu .ui-menu-item a
.ui-widget-content a
于 2013-05-07T18:12:19.037 に答える