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"}]
4

5 に答える 5

122

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

).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")

于 2010-08-16T04:34:06.203 に答える
11

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

トリックは次のとおりです。

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

プラグインを JQuery UI に追加する方法がわからない場合:

  1. プラグイン (Scott González の html 拡張子) を js ファイルに保存するか、js ファイルをダウンロードします。
  2. html ページ (または jquery-ui js ファイル) に jquery-ui オートコンプリート スクリプトを既に追加しています。オートコンプリート JavaScript ファイルの後に、このプラグイン スクリプトを追加します。
于 2013-07-28T08:48:43.940 に答える
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.

于 2011-11-21T21:40:34.710 に答える
0

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

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

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

(これは 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」フィールドのチェックを追加しました。そこにある場合は、そのフィールドのみを使用します。そこにない場合は、通常どおり機能します。

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

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

于 2013-01-11T20:31:00.040 に答える