私が使用しようとしているコードは次のとおりです (パーツはリモート json からプルされ、パーツはカスタム データ表示から削除されます)。
$(function () {
$("#Field1Text").autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
url: "/Main/Users/GetItems",
dataType: "json",
data: {
group: "Default",
query: request.term
}
},
focus: function (event, ui) {
$("#Field1Text").val(ui.item.Description);
return false;
},
select: function (event, ui) {
$("#Field1Text").val(ui.item.Description);
return false;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append("<a><strong>" + item.Description + "</strong><br>" + item.Section + " - " + item.Type + " - " + item.Name + "</a>")
.appendTo(ul);
};
});
データは正常にプルバックされますが、レンダー アイテム関数は起動しません。レンダー アイテムのバージョンを破棄し、ソース内で success: を使用すると、次のようになりました。
success: function (data) {
response($.map(data, function (ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append("<a><strong>" + item.Description + "</strong><br>" + item.Section + " - " + item.Type + " - " + item.Name + "</a>")
.appendTo(ul);
}));
}
私は firebug を使用し、応答セクションでブレークポイントをヒットすることができました: データ内のデータを見ると、次のように見えました:
[ Object { ...data... }, Object { ...data... }]
成功セクションの行にブレークポイントを設定すると.data、ul がオブジェクトの 1 つであることがわかります( looks like " Object { ... data ... }")
この時点で item 要素は 0 であり、<a>タグをレンダリングしようとすると、すべてのプロパティで未定義として表示されます (理解できるように、 item オブジェクトを として扱っているようintです)。
そのコンポーネントを適切に処理するにはどうすればよいですか?
編集：申し訳ありませんが、コメントの提案に従ってjsFiddleを追加したかったのですが、家族の問題が発生していました。
私たちが仕事で使用しているものに似たコードにコメントしました。残念ながら、この Web アプリは外部に接続されていないデータベースを使用する内部アプリであるため、ライブ データを使用することはできません。testResults オブジェクトは、success: セクションのデータ要素で見たものです。
私は実際に成功セクションを起動することができましたが、ul.Properties を見て実際のデータを見ることができたので、(少なくとも私の仮定では) jQuery UI/Autocomplete を正しく使用しているとは思いません。アイテムの追加は偽のデータで機能しましたが、成功ブロックをコピーしてレンダー アイテムに貼り付けようとすると、すべてのデータが未定義でした。また、その段階で 1 対 1 のマッピングを見つけることもできませんでした (ul はページ上の要素で、item は [li] だけでした)。