ajaxリクエストを行うJavaScriptコード
$('#search-field').autocomplete({source: 'url/of/autocomplete'});
JSON構造を変更するまでは完全に機能しました。以前は戻ってきました
["anything","something","super value"]
今それ（サーバー）は少し複雑なJSONを返します
[{"title":"some-title","link":"/searc?q=some-title"}, {"title":"some-title2","link":"/searc?q=some-title2"}]
さて、今は表示されていません。動作していますが、値（タイトル）が明確に表示されていません。
それを解決するにはどうすればよいですか？
AJAXで返されたデータを使用していると思うので、ソース属性は関数である必要があり、選択されたときに新しい属性を追加する必要があります。データを受け取ったら、それをグローバル変数に格納する必要があります。次に、その値を他の関数で取得します。
$('#search-field').autocomplete({source: function(){
jQuery.post('url', data, function(dataReceived){globalVariable = dataReceived; }, 'json');
},
select: function(event, ui) {
var local = globalVariable[ui.item];
// work with the local variable.
}
});
「タイトル」を「ラベル」に、「リンク」を「値」に名前変更する必要があります。それでおしまい！
[{"title":"some-title","link":"/searc?q=some-title"}, {"title":"some-title2","link":"/searc?q=some-title2"}]私はあなたのコードを見ることができないので、それがあなたのデータソースであると仮定しましょう。そうは言っても、これが私がそれについて行く方法です...
$(document).ready(function(){
var dataSource= [{"title":"some-title","link":"/searc?q=some-title"}, {"title":"some-title2","link":"/searc?q=some-title2"}];
$('#search-field').autocomplete({
source: function(request, response) {
var filterResults = $.map(dataSource, function(item) {
if(item.title.toLowerCase().indexOf(request.term.toLowerCase()) != -1 || item.link.toLowerCase().indexOf(request.term.toLowerCase()) != -1){
return item;
}
else{
return null;
}
});
response(filterResults);
}
}).data('autocomplete')._renderItem = function (ul, item)
{
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html("Title: " + item.title + ", Link: " + item.link))
.appendTo(ul);
};
});
ライブデモ： http： //jsfiddle.net/hUE9M/131/
この方法では、「タイトル」と「リンク」の両方のプロパティを検索できます。これがお役に立てば幸いです。
古いJSON構造を維持し、最初に機能するものを試してください