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/
Оскільки це питання / відповідь привернуло певну увагу, я подумав, що доповню цю відповідь ще одним способом досягнення цього. Цей метод є найбільш корисним, коли на сторінці є лише один віджет автозаповнення. Цей спосіб можна застосувати до віджету автозаповнення, який використовує віддалене або локальне джерело:
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([]);
}
});
}
});