JQuery 1.8.3 と JQuery UI 1.8.24 を使用しています。
これは問題なく動作するコードです:
$(function () {
$("#").autocomplete({
source: function (request, response) {
$.ajax({
url: '', type: "POST", dataType: "json",
data: { searchPattern: request.term },
cache: false,
success: function (data) {
response($.map(data, function (item) {
return { label: item.Label, value: item.Value, id: item.Id, description: item.Description }
}))
}
});
},
delay: 300,
minLength: 2,
autoFocus: true
})
.data("autocomplete")._renderItem = function (ul, item) {
return $("li>/li>")
.data("ui-autocomplete-item", item)
.append("a>" + item.label + "br>div style=\"font-size:x-small;font-style:italic;\">" + item.description + "/div>/a>")
.appendTo(ul);
};
});
しかし、HTML に 2 番目のテキスト ボックスを追加し、上記の JavaScript をコピーしてセレクターと URL を変更すると (最終的に 2 つのオートコンプリート テキスト ボックスができます)、2 番目のオートコンプリートで次のエラーが発生します。
TypeError: $(...).autocomplete(...).data(...) is undefined
1 つのオートコンプリートでは完璧に機能しますが、2 番目のオートコンプリートでは理由を説明できません。誰でも私を助けることができますか?
前もって感謝します!
トビー
編集:
問題が見つかりました。
JavaScript コードは *.js ファイルにあり、2 つのテキスト ボックスは 2 つの異なる *.thml ファイルにあります。
したがって、一度に 1 つのテキスト ボックスしかなく、これが問題です。
*.html ファイルの最後の部分 (data(...) を使用) を実行すると、正常に動作します。
$("#selector").autocomplete().data("autocomplete")._renderItem = renderItem;
お手伝いありがとうございます!