jQueryUI 1.9
jQueryUI 1.9 благословил виджет автозаполнения с событием response, которое мы можем использовать, чтобы обнаружить, если результаты не возвращены:
Сработал после поисказавершается, прежде чем появится меню.Полезно для локальных манипуляций с данными предложений, когда обратный вызов пользовательской опции источника не требуется.Это событие всегда инициируется, когда поиск завершается, даже если меню не будет отображаться из-за отсутствия результатов или автозаполнение отключено.
Итак, с учетом этого, взлома нам пришлосьdo в 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/
Поскольку этот вопрос / ответ привлек некоторое внимание, я подумал, что обновлю этот ответ еще одним способом сделать это.Этот метод наиболее полезен, когда у вас есть только один виджет автозаполнения на странице.Этот способ может быть применен к виджету автозаполнения, который использует удаленный или локальный источник:
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([]);
}
});
}
});