jQueryUIオートコンプリートでのHTMLの使用


83

jQuery UI 1.8.4より前は、オートコンプリートを操作するために作成したJSON配列でHTMLを使用できました。

私は次のようなことをすることができました:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

ドロップダウンに赤いテキストとして表示されます。

1.8.4以降は機能しません。私が見つかりました。http://dev.jqueryui.com/ticket/5275をカスタムHTMLの例を使用するように私に指示され、ここで私は運がなかったています。

HTMLを提案に表示するにはどうすればよいですか?

私のjQueryは次のとおりです。

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

私のJSON配列には、次のようなHTMLが含まれています。

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

2
私もこれに答えてほしい、私はちょうど同じ問題に遭遇した。
キーランアンドリュース

回答:


120

これをコードに追加します。

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

したがって、コードは次のようになります。

<script type="text/javascript">
 $(function () {
     $("#findUserIdDisplay").autocomplete({
         source: "ui_autocomplete_users_withuname.php",
         minLength: 2,
         select: function (event, ui) {
             $('#findUserId').val(ui.item.id);
             return false;
         }
     }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
 });
</script>

注:古いバージョンのjQueryUI.data("autocomplete")"では、代わりにを使用してください.data("ui-autocomplete")


_renderItemは何をしますか?それはHTMLを変換していますか?
ジェイソン

2
forum.jquery.com/topic/using-html-in-autocomplete 2番目の投稿を参照してください、それはすべてを説明しています。
キーランアンドリュース

7
jQuery uiの新しいバージョンでは、data( "autocomplete")ではなく.data( "ui-autocomplete")を使用します
Mike Starov

1
を削除する<a>と、アイテムをクリック/スクロールできなくなります。
ピオトルクラ2013年

あなたは命の恩人です。あなたの答えに小切手を書きたいです!:)
Sri Harsha Kappala 2015

10

これは、次のjquery-uiオートコンプリートドキュメントにも記載されています:http//api.jqueryui.com/autocomplete/#option-source

秘訣は次のとおりです。

  1. このjQueryUI拡張機能を使用する
  2. 次に、オートコンプリートオプションパスで autocomplete({ html:true});
  3. これで&lt;div&gt;sample&lt;/div&gt;、オートコンプリート用のJSON出力の「ラベル」フィールドにhtmlを渡すことができます。

プラグインをJQueryUIに追加する方法がわからない場合は、次のようにします。

  1. プラグイン(ScottGonzálezのhtml拡張子)をjsファイルに保存するか、jsファイルをダウンロードします。
  2. htmlページ(またはjquery-ui jsファイル)にjquery-uiオートコンプリートスクリプトを既に追加しています。そのオートコンプリートjavascriptファイルの後にこのプラグインスクリプトを追加します。

2

このソリューションはお勧めしませんが、ソースファイルjquery.ui.autocomplete.js(v1.10.4)を編集するだけです。

元の:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

修繕:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

0

同じ問題が発生しましたが、パフォーマンスのために、option( 'source')に静的なオプションの配列を使用することを好みます。このソリューションでそれを試した場合、jQueryはラベル全体も検索することがわかります。

EGを提供した場合:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

次に、「span」と入力すると両方の結果が一致し、$.ui.autocomplete.filter関数をオーバーライドするだけで値を検索できるようになります。

$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}

あなたは、最後のパラメータを編集することができますc.value例えば、あなたが欲しいものをc.id || c.label || c.valueあなたがラベル、値、またはIDで検索することができるようになります。

オートコンプリートのソースパラメータには、必要な数のキー/値を指定できます。

PS:元のパラメータはc.label||c.value||cです。


参考:AJAXをソースとして使用する場合は、とにかく渡された検索「用語」でフィルタリングする責任があるため、このソリューションは必要ありません
Clarence Liu

0

クラレンスがこの問題について言及しました。スタイルや画像で見栄えを良くするためにHTMLを提供する必要がありました。これにより、すべての要素に一致する「div」と入力することになりました。

しかし、私の値はID番号だけだったので、それだけで検索を実行することはできませんでした。ID番号だけでなく、いくつかの値を探すために検索する必要がありました。

私の解決策は、検索値のみを保持する新しいフィールドを追加し、jQueryUIファイルでそれを確認することでした。これは私がしたことです:

(これはjQuery UI 1.9.2にあります。他の人にも同じかもしれません。)

6008行目のフィルター機能を編集します。

filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            if (value.searchonly == null)
                return matcher.test(value.label || value.value || value);
            else
                return matcher.test(value.searchonly);
        });
    }

「value.searchonly」フィールドのチェックを追加しました。そこにある場合は、そのフィールドのみを使用します。そこにない場合は、通常どおり動作します。

次に、JSONオブジェクトに「searchonly」キーを追加できることを除いて、以前とまったく同じようにオートコンプリートを使用します。

それが誰かを助けることを願っています!


2
@PeterMortensenHTMLへのウィキペディアのリンクを含めるように編集したと思います。
ダンアトキンソン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.