नॉकआउटज के साथ ट्विटर बूटस्ट्रैप स्वतः पूर्ण ड्रॉपडाउन / कॉम्बोबॉक्स


114

मेरे पास एक आवश्यकता है जहां मैं बूटस्ट्रैप स्वतः पूर्ण ड्रॉपडाउन का उपयोग करना चाहता हूं, लेकिन अगर वे चाहें तो उस ड्रॉपडाउन में मुफ्त फॉर्म टेक्स्ट हो सकता है। इससे पहले कि आप TypeAhead के बारे में सोचें, मैं बूटस्ट्रैप TypeAhead टेक्स्टबॉक्स का उपयोग कर सकता हूं, लेकिन मुझे ड्रॉपडाउन की आवश्यकता है क्योंकि हम कुछ डिफ़ॉल्ट मान देना चाहते हैं जैसे कि हेडस्टार्ट विकल्प उपयोगकर्ताओं को यह नहीं पता है कि क्या खोजना है।

मैं MVC DropDownListFor के साथ इसका उपयोग कर रहा हूं क्योंकि यह हमारे लिए चयन नियंत्रण बनाता है।

मुझे यह लेख मिला जो मेरे लिए ऐसा करता है।

https://github.com/danielfarrell/bootstrap-combobox/pull/20

मुझे बस इतना करना था कि चयन नियंत्रण से नाम हटा दिया जाए और नियंत्रण मुझे मुफ्त फॉर्म पाठ में प्रवेश करने दे रहा था। अभी तक सभी अच्छे हैं।

अब, मैं इसे नॉचआउटज के साथ संयोजन में उपयोग कर रहा हूं। मैं अपने विकल्पों को चुनता हूं और चयनित मूल्य को नियंत्रित करता हूं और फिर अपने टेम्पलेट के रेंडर पर, मैंने (चयनकर्ता) .combobox () का चयन किया है, जो चयन नियंत्रण को बूटस्ट्रैप कोमोबोबॉक्स बनाता है और एक इनपुट नियंत्रण जोड़ता है और दृश्यों में चयन नियंत्रण को छुपाता है। पीछे।

समस्या अब तब है जब मैं सर्वर पर पोस्ट करने के लिए उसे मान प्राप्त करने का प्रयास करता हूं, क्योंकि इनपुट बॉक्स में मैंने जो मूल्य रखा है वह उन विकल्पों में से वैध विकल्प नहीं है जिन्हें मैंने नियंत्रण का चयन करने के लिए दिया था, यह हमेशा डिफ़ॉल्ट रूप से पहले विकल्प पर सेट होता है। यह बेज़्यू है, मैंने चयनित मूल्य के बंधन को चयनित नियंत्रण पर सेट किया है न कि इनपुट बॉक्स पर जो बूटस्ट्रैप-कॉम्बोबॉक्स.जेएस द्वारा बनाया गया था।

मेरा सवाल यह है कि मुझे डेटा-बाइंड के इनपुट बॉक्स को उसी छिद्र से कैसे प्राप्त किया जाए, जैसा कि चयन नियंत्रण के लिए बाध्य था।

कोई अन्य विकल्प ?? मुझे बताएं कि क्या आपको अधिक स्पष्टीकरण की आवश्यकता है या प्रश्न हैं। कृपया सुझाव दे।

धन्यवाद।


मुझे अपनी स्थिति का हल मिल गया। मैंने स्वत: पूर्ण कॉम्बोक्स के बजाय टाइपअहेड टेक्स्ट बॉक्स का उपयोग किया और उपयोगकर्ताओं द्वारा नियंत्रण या हिट बटन पर भी ध्यान केंद्रित करने पर डिफ़ॉल्ट रूप से विकल्प ड्रॉपडाउन दिखाया। इस तरह, वे जानते हैं कि वे क्या देख सकते हैं जिसके लिए मेरी प्राथमिक आवश्यकता थी।
कृष्ण तेजा वीरमचन्नी

जवाबों:


254

बूटस्ट्रैप के लिए Select2 पर एक नज़र डालें । यह आपकी जरूरत का हर काम करने में सक्षम होना चाहिए।

एक और अच्छा विकल्प Selectize.js है । यह बूटस्ट्रैप के लिए थोड़ा अधिक देशी लगता है।


27
आपने पाठ इनपुट का उपयोग करने के लिए Select2 का उपयोग कैसे किया जो पहले से ही डेटा स्रोत में शामिल नहीं था?
कॉम्पेंसेन्टल

4
जैसा कि @compcentral ने सही उल्लेख किया है, Select2 आपको कुछ भी इनपुट करने की अनुमति नहीं देता है जो विकल्प सूची में नहीं है। इसका अनुकरण करने के लिए (ऑटो) टैगिंग सुविधा का उपयोग करना बोझिल है, क्योंकि यह पाठ को रिक्त स्थान के साथ स्वीकार नहीं करता है।
स्टास स्लैको

2
क्या अच्छी बात है! मैंने Selectize का उपयोग करके समाप्त किया क्योंकि यह अधिक बूटस्ट्रैप-एस्क प्रतीत होता है।
स्टीवन

1
@ कॉम्पेंसेन्ट्रल और स्टास द्वारा इंगित किए गए मुद्दे के कारण, मैंने selectize.js के साथ जाना चुना।
नील मुनरो

1
@ क्यों आप दूरस्थ डेटा स्रोत विधि का उपयोग नहीं करते हैं?
क्लिन डीसिल्वा

23

क्या मूल एचटीएमएल 5 डिटॉलिस्ट काम करता है? यह साफ है और आपको गंदे थर्ड पार्टी कोड के साथ नहीं खेलना है। W3SCHOOL ट्यूटोरियल

MDN दस्तावेजीकरण बहुत वाक्पटु है और उदाहरण पेश करता है।


3
HTML 5 के साथ प्रमुख समस्या datalistयह है कि यह किसी भी DOM इवेंट का समर्थन नहीं करता है। तो हर बार जब आप एक मान का चयन करते हैं, तो आपको संबंधित पाठ बॉक्स
पवन

@Pawan यह सच नहीं है (अब?)। डिटालिस्ट फायर से जुड़ा इनपुट बदल जाता है और कम से कम घटनाओं का इनपुट करता है। देखो यहाँ , दोनों परिवर्तन और इनपुट ईवेंट एक कंसोल लॉग आग।
फेलिक्स गगनोन-ग्रेनियर

1
इन सभी वर्षों। इन वर्षों में एक सरल और साफ पहले से समर्थित समाधान के बजाय तीसरे पक्ष के पुस्तकालयों के साथ खिलवाड़ ...
फेलिक्स गगनोन-ग्रेनियर

3

बूटस्ट्रैप 3 देशी प्लगइन के लिए Select2

https://fk.github.io/select2-bootstrap-css/index.html

यह प्लगइन select2 jquery प्लगइन का उपयोग करता है

nuget

PM> इंस्टॉल-पैकेज Select2-बूटस्ट्रैप


1
हैलो। क्या यहाँ पहले उत्क्रमित उत्तर के साथ कोई अंतर है? जहाँ तक मैं देख सकता हूँ आप चयनित 2 सुझाव की नकल करते हैं?
फेलिक्स गगनोन-ग्रेनियर


1

क्या मैं सुझाव दे सकता हूं http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html , ट्विटर पोस्ट सुझाव की तरह अधिक काम करता है जहां यह आपको एक सूची देता है। @ या # टैग के आधार पर उपयोगकर्ता या विषय

यहां डेमो देखें: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

इसमें आप आसानी से @ और # को अपनी इच्छानुसार बदल सकते हैं


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.