jQueryUI 1.9
jQueryUI 1.9 благословил виджет автозаполнения responseсобытием, которое мы можем использовать для определения отсутствия результатов:
Запускается после завершения поиска до отображения меню. Полезно для локального управления данными предложения, когда обратный вызов настраиваемой исходной опции не требуется. Это событие всегда запускается после завершения поиска, даже если меню не отображается из-за отсутствия результатов или отключения автозаполнения.
Итак, имея это в виду, взлом, который мы должны были сделать в jQueryUI 1.8, заменен на:
$(function() {
$("input").autocomplete({
source: ,
response: function(event, ui) {
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) {
}
},
error: function () {
response([]);
}
});
}
});