JQuery UI AutocompleteでHTMLを使用します
-
28-09-2019 - |
質問
前 jquery ui 1.8.4使用できます HTML JSONアレイでは、オートコンプリートで動作するように構築されました。
私は次のようなことをすることができました:
$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"}]
解決
これをコードに追加します:
).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")
他のヒント
これは、jquery-ui autocompleteドキュメントでも文書化されています。http://api.jqueryui.com/autocomplete/#option-source
トリックは次のとおりです。
- このjQuery UI拡張機能を使用します
- 次に、オートコンプリートオプションパスで
autocomplete({ html:true});
- これで、HTMLに合格できます
<div>sample</div>
AutoComplete用のJSON出力の「ラベル」フィールド。
プラグインをjQuery UIに追加する方法がわからない場合は、
- JSファイルにプラグイン(ScottGonzález 'HTML拡張子)を保存するか、JSファイルをダウンロードします。
- htmlページ(またはjquery-ui jsファイル)にjquery-uiオートコンプリートスクリプトを既に追加しています。 AutoComplete JavaScriptファイルの後にこのプラグインスクリプトを追加します。
このソリューションはお勧めしませんが、ソースファイル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)},
私は同じ問題を抱えていましたが、パフォーマンスにはオプション(「ソース」)に静的な配列のオプションを使用することを好みます。このソリューションでそれを試した場合、JQueryがラベル全体で検索することがわかります。
たとえば、提供した場合:
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
次に、「スパン」と入力すると、両方の結果が一致し、値を検索してもらいます。 $.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で検索することができます。
AutoCompleteのソースパラメーターに多くのキー/値を必要に応じて提供できます。
PS:元のパラメーターはです c.label||c.value||c
.
クラレンスが言及した問題がありました。供給する必要がありました 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」フィールドのチェックを追加しました。そこにある場合、そのフィールドのみを使用します。そこにない場合、通常どおり機能します。
次に、JSONオブジェクトに「SearchOnly」キーを追加できることを除いて、以前とまったく同じようにオートコンプリートを使用します。
それが誰かを助けることを願っています!