2011-10-10 11 views
10

अभी मेरे पास एक टेक्स्ट बॉक्स में मेरा स्वत: पूर्ण विजेट है। आदर्श रूप में, यह एक चयन बॉक्स होगा, लेकिन मैं यह नहीं समझ सकता कि किसी को किसी एक बॉक्स में टाइप करने दें।मैं jQuery ऑटोकंपलेट के साथ एक चयन बॉक्स का उपयोग कैसे कर सकता हूं?

तो मुझे एक टेक्स्ट बॉक्स और एक छुपा बॉक्स रखने के लिए रवाना किया गया है। छिपे हुए बॉक्स को टेक्स्ट बॉक्स में प्रदर्शित होने वाली आईडी के साथ अपडेट किया जाना चाहिए।

मैं कम से कम एक गहराई से स्तर पर jQuery के लिए बहुत नया हूं। क्या मैं इसे जितना कठिन बनाना चाहता हूं? मुझे निश्चित रूप से स्वतः पूर्ण करने की आवश्यकता है, क्योंकि संभावित रूप से सैकड़ों हजारों संभावित मूल्य हैं।

उत्तर

9

यह ठीक से jQueryUI डेमो पृष्ठ पर स्वत: पूर्ण के लिए a great example है। यह वास्तव में बैकिंग स्टोर के रूप में select तत्व का उपयोग करता है।

आप दूरस्थ डेटा स्रोत का उपयोग करने के लिए इसे आसानी से संशोधित कर सकते हैं। अगर आपको रिमोट होने के स्रोत की आवश्यकता है, तो मुझे बताएं और मैं एक उदाहरण प्रदान कर सकता हूं।

+1

देखें कि वह उदाहरण स्पष्ट रूप से कहता है कि "यह एक समर्थित या यहां तक ​​कि पूर्ण विजेट नहीं है। यह पूरी तरह से अनुकूलन के लिए स्वतः पूर्ण हो सकता है", कुछ मुद्दों में हो सकता है (और मेरे पास उनमें से कुछ हैं :() – Andrea

17

आपको chosen नामक jQuery प्लगइन में देखना चाहिए।
मुझे लगता है कि यह पिछले वर्ष (या अधिक) में लिखा गया सबसे अच्छा jQuery प्लगइन है।

चुना गया एक जावास्क्रिप्ट प्लगइन है जो लंबे, अनावश्यक चयन बॉक्स को और अधिक उपयोगकर्ता के अनुकूल बनाता है। यह वर्तमान में jQuery और प्रोटोटाइप स्वाद दोनों में उपलब्ध है।

+0

वाह। आआंद ... मैं कर रहा हूँ। गजब का!!! धन्यवाद! – AKWF

+0

यह सुनिश्चित करने के लिए उत्तर स्वीकार किया जाना चाहिए। – user3117628

+0

@ user3227070 - उस समय, यह सबसे अच्छा था। लेकिन 'select2' ने इसे हटा दिया है। –

16

"चुने गए" - "Select2" (jQuery only) के लिए एक बहुत अच्छा विकल्प है।

"Select2" उपयोग के मामलों

  • खोज के साथ देशी चयन बढ़ाना।
  • बेहतर बहु-चयन इंटरफ़ेस के साथ मूल चयन को बढ़ाएं।
  • जावास्क्रिप्ट से डेटा लोड हो रहा है: आसानी से AJAX के माध्यम से आइटम लोड करें और उन्हें खोजने योग्य बनाएं।
  • नेस्टिंग ऑप्टग्रुप: देशी चयन केवल घोंसला के एक स्तर का समर्थन करता है। Select2 में यह प्रतिबंध नहीं है।
  • टैगिंग: फ्लाई पर नए आइटम जोड़ने की क्षमता।
  • बड़े, दूरस्थ डेटासेट के साथ काम करना: खोज शब्द के आधार पर आंशिक रूप से डेटासेट लोड करने की क्षमता।
  • बड़े डेटासेट का पेजिंग: परिणामों को अंत तक स्क्रॉल करते समय अधिक पृष्ठों को लोड करने के लिए आसान समर्थन।
  • टेम्पलेटिंग: परिणाम और चयनों के कस्टम प्रतिपादन के लिए समर्थन।
संबंधित मुद्दे