के साथ स्पिनर प्रदर्शित करें मैं पूरी जगह पर खोज कर रहा हूं और बस इसे किसी को नहीं देख रहा हूं - क्या एक jQuery UI स्वत: पूर्ण के साथ किसी प्रकार का स्पिनर/लोडर होना संभव है? (1.8) जबकि डेटा प्राप्त किया जा रहा है?jQuery-ui autocomplete
आप स्वत: पूर्ण के साथ मैदान के बगल में एक स्पिनर छवि डाल सकते हैं और इसे प्रारंभ में छुपा सकते हैं। फिर इसे छुपाने/दिखाने के लिए कॉलबैक फ़ंक्शंस का उपयोग करें।
तो स्पिनर को दिखाने के लिए खोज विकल्प का उपयोग करें और इसे छिपाने के लिए खुला:
v1.8 और नीचे
$(".selector").autocomplete({
search: function(event, ui) {
$('.spinner').show();
},
open: function(event, ui) {
$('.spinner').hide();
}
});
v1.9 और ऊपर
$(".selector").autocomplete({
search: function(event, ui) {
$('.spinner').show();
},
response: function(event, ui) {
$('.spinner').hide();
}
});
महान js- एक स्पिनर का संस्करण: http://fgnass.github.com/spin.js/
मेरा समाधान थाई-ऑटोकंपलेट-लोडिंग सीएसएस क्लास का उपयोग करना था जोड़ा गया है और इनपुट तत्व पर हटा दिया जाता है, जबकि ajax GET अनुरोध प्रक्रिया में है:
input[type='text'].ui-autocomplete-loading {
background: url('/icons/loading.gif') no-repeat right center;
}
दी है कि यह एक बहुत लचीला समाधान नहीं है के बाद से आप इनपुट तत्व बाहर लेकिन मेरे मामले में स्पिनर प्रदर्शित नहीं कर सकता यह वास्तव में यूएक्स मैं देख रहा था।
के लिए स्टाइल की आवश्यकता थी, मैंने कोशिश की और यह भी काम किया। यह पूरी पृष्ठभूमि को स्पिनर में बदल रहा है, जो पृष्ठभूमि एक अलग रंग है (यानी: नीली पृष्ठभूमि पर सफेद टेक्स्टबॉक्स) अच्छा नहीं है। मैंने निम्नलिखित का उपयोग किया: .ui-autocomplete-loading { पृष्ठभूमि-छवि: url ('/ content/images/ui-anim_basic_16x16.gif'); पृष्ठभूमि दोहराना: दोहराना नहीं; पृष्ठभूमि-स्थिति: दाहिने केंद्र; } – Losbear
सीएसएस समाधान
तो लोड हो रहा है तत्व तो इनपुट नियंत्रण का एक भाई सीएसएस सामान्य भाई Combinator (~) है इस्तेमाल किया जा सकता:
.loading {
/* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
background-image: url(loading.gif);
}
input[type='text'].ui-autocomplete-loading {
background: url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat
right center;
}
और एक साइड नोट के रूप में - स्पिनरों के लिए एक महान जगह = http: //www.ajaxload.info/ – woolyninja
इस समाधान के साथ समस्या स्पिनर छिपी नहीं है अगर प्रतिक्रिया में शून्य परिणाम होते हैं क्योंकि उस मामले में खुली घटना उत्पन्न नहीं होती है। नियंत्रण गिनती के बावजूद नियंत्रण में वास्तव में "खोज पूर्ण" ईवेंट होना चाहिए। योजना विकी http://wiki.jqueryui.com/w/page/12137709/Autocomplete "प्रतिक्रिया" नामक ऐसी घटना का संदर्भ देती है लेकिन ऐसा प्रतीत नहीं होता है। – stefann
अपरिवर्तनीय jQuery UI 1.9 में इस समस्या के लिए एक फिक्स शामिल है http://bugs.jqueryui.com/ticket/6777 – stefann