これは実行可能ですが、source
オプションを関数に変換し、AJAXリクエストを自分で作成する必要があります。例えば:
$("#selector").autocomplete({
source: function (request, response) {
/* Show the loading indicator while a search is in progress */
response([{ label: "Loading...", loading: true }]);
$.ajax({
url: "your_url_here",
data: request,
type: "GET",
dataType: "json"
}).success(response);
},
}).data("autocomplete")._renderItem = function (ul, item) {
var $li = $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
/* Make sure nothing happens when you click "Loading" */
if (item.loading) {
$li.find("a").on("click", false);
}
};
オーバーライドする最後のビット_renderItem
は、読み込み中のアイテムのクリックイベントをキャンセルできるようにするためです(そして、アイテムがに配置されないようにしますinput
)。
例: http: //jsfiddle.net/m3MGH/
以下のコメントごとに更新:
で読み込み中の画像を表示するには、次のdiv
ようにします(_renderItem
関数を変更するだけです)。
.data("autocomplete")._renderItem = function(ul, item) {
var $li = $("<li></li>");
if (item.loading) {
$li.append("<div>Loading<img src='my_loading_img' /></div>").appendTo(ul);
} else {
$li.data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
}
return $li;
};
物事を適切に配置するには、おそらく小さなCSSを使用する必要がありますが、これで開始できます。