jQueryUI 1.9
jQueryUI 1.9 はオートコンプリート ウィジェットにresponseイベントを追加しました。これを利用して、結果が返されなかった場合に検出できます。
検索が完了した後、メニューが表示される前にトリガーされます。カスタム ソース オプションのコールバックが不要な、提案データのローカル操作に役立ちます。このイベントは、結果がないかオートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。
したがって、それを念頭に置いて、jQueryUI 1.8 で行わなければならなかったハッキングは次のように置き換えられます。
$(function() {
$("input").autocomplete({
source: /* */,
response: function(event, ui) {
// ui.content is the array that's about to be sent to the response callback.
if (ui.content.length === 0) {
$("#empty-message").text("No results found");
} else {
$("#empty-message").empty();
}
}
});
});
例: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
jQueryUI API でこれを行う簡単な方法を見つけることができませんでしたが、autocomplete._response関数を独自のものに置き換えてから、デフォルトの jQueryUI 関数 (オートコンプリートのprototypeオブジェクトを拡張するために更新)を呼び出すことができます。
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
次に、イベント ハンドラーをイベントにバインドしautocompletesearchcompleteます (コンテンツは検索の結果、配列です)。
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
ここで何が起こっているかというと、オートコンプリートのresponse関数を変数 ( __response)に保存してから、applyそれを再度呼び出すために使用しています。デフォルトのメソッドを呼び出しているため、このメソッドによる悪影響は想像できません。オブジェクトのプロトタイプを変更しているので、これはすべてのオートコンプリート ウィジェットで機能します。
これが実際の例です: http://jsfiddle.net/andrewwhitaker/VEhyV/
私の例ではローカル配列をデータ ソースとして使用していますが、それは問題ではないと思います。
更新:新しい機能を独自のウィジェットにラップして、デフォルトのオートコンプリート機能を拡張することもできます。
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
通話を次の場所に変更.autocomplete({...});:
$("input").customautocomplete({..});
そして、autocompletesearchcomplete後でカスタム イベントにバインドします。
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
ここで例を参照してください: http://jsfiddle.net/andrewwhitaker/VBTGJ/
この質問/回答は注目を集めているので、これを達成するためのさらに別の方法でこの回答を更新すると思いました。この方法は、ページにオートコンプリート ウィジェットが1 つしかない場合に最も役立ちます。この方法は、リモートまたはローカル ソースを使用するオートコンプリート ウィジェットに適用できます。
var src = [...];
$("#auto").autocomplete({
source: function (request, response) {
var results = $.ui.autocomplete.filter(src, request.term);
if (!results.length) {
$("#no-results").text("No results found!");
} else {
$("#no-results").empty();
}
response(results);
}
});
の内部は、if結果が検出されない場合に実行するカスタム ロジックを配置する場所です。
例: http://jsfiddle.net/qz29K/
リモート データ ソースを使用している場合は、次のように言います。
$("#auto").autocomplete({
source: "my_remote_src"
});
次に、コードを変更して、自分で AJAX 呼び出しを行い、0 の結果が返されたときに検出できるようにする必要があります。
$("#auto").autocomplete({
source: function (request, response) {
$.ajax({
url: "my_remote_src",
data: request,
success: function (data) {
response(data);
if (data.length === 0) {
// Do logic for empty result.
}
},
error: function () {
response([]);
}
});
}
});