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([]);
}
});
}
});