web-dev-qa-db-ja.com

jQuery UIオートコンプリートでHTMLを使用する

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の例を使用するように指示します here 運がありません。

提案に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"}]
htmljquery-uiautocompletejquery-ui-autocomplete
82
Jason

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

_).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")を使用します

116
Kieran Andrews

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

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

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

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

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

このソリューションはお勧めしませんが、ソースファイル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)},
1
revoke

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

たとえば、指定した場合：

[{"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です。

0
Clarence Liu

Clarenceが言及した問題がありました。スタイルと画像で素敵な外観にするために [〜＃〜] 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オブジェクトに追加できることを除いて、オートコンプリートを以前とまったく同じように使用します。

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

0
Ricketts