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