एक jquery-select2 में मान दर्ज करना जो कि चयन सूची में नहीं हैं

Question

मेरे पास एक उपयोग केस है जहां मैं लोगों को select2 plugin के टेक्स्ट बॉक्स में मान टाइप करने की अनुमति देता हूं जो चयन सूची में प्रकट नहीं होते हैं।

एक मामले में मैं सत्यापन प्रदान कर रहा हूं और सबमिट नहीं करता जब तक कि उपयोगकर्ता के पास वैध आइटम नहीं चुना जाता है, लेकिन जब तक वे अपने मूल्यों को साफ़ नहीं करना चाहते हैं। चयन बॉक्स में 1.00, 1.50, 1.75, एनए, एबीएस हो सकता है और उपयोगकर्ता ने अभी 1.80 टाइप किया है। यह एक अवैध मान है लेकिन मैं उनके परिवर्तनों को खोना नहीं चाहता हूं, मैं उस बॉक्स को अमान्य के रूप में ध्वजांकित कर दूंगा और उन्हें अपने परिवर्तनों को ठीक करने की अनुमति दूंगा। मैं चयन बॉक्स में 1.80 जोड़ना नहीं चाहता क्योंकि यह एक अवैध मान है, लेकिन मैं इसे साफ़ नहीं करना चाहता हूं।

यह कैसे प्राप्त करना संभव है?

Answer 1

यदि आप जेएस में मान्य हैं, तो चयन 2 में डायनामिक लोडिंग/जेनरेटिंग डेटा के लिए एक उदाहरण है जो क्वेरी() को ओवरराइड करता है ताकि उपयोगकर्ता के इनपुट को दोहराया जा सके।

देखें: http://ivaynberg.github.io/select2/ 'डेटा लोड हो रहा'

मैं एक ऐसी ही समस्या (सर्वर साइड) JQuery यूआई 'स्वत: पूर्ण' के साथ हल किया। यहाँ, मैं वस्तुओं लपेटकर संभव व्याख्यात्मक संदेश के साथ दोनों एक लेबल, सजावट के बिना एक पाठ मूल्य, और एक संयुक्त ID मान & स्थिति झंडा लौटने का दृष्टिकोण लिया। छिपे हुए फ़ील्ड में टेक्स्ट & आईडी स्टोर करने के लिए मैंने select को ओवरराइड किया।

मेरे मामले में, मैं मौजूदा ग्राहकों के बीच भेद किया गया था संदर्भित करने के लिए, या दर्ज किए गए नाम के साथ एक नया ग्राहक बनाने। मैं मौजूदा ग्राहकों से मेल खाते या बनाने "एबीसी नया ग्राहक" के विकल्पों की सूची में सक्षम था, काफी अच्छी तरह से:

उपयोगकर्ता में प्रवेश करती है: "वर्णमाला सूप" और के एक विकल्प देखता है:

• अल्फा पैकेजिंग
• Campbells सूप
• "वर्णमाला सूप"

ऐसा ही एक तकनीक आप पर लागू हो सकने पैदा करते हैं। उम्मीद है की यह मदद करेगा।

Answer 2

$(document).ready(function() { 
    var items = [{id: "1", text: "some_available_text"}]; 
    $("#hidden_input_for_select2").select2({ 
     query: function (query) { 
      var data = {results: []}; 
      if(query.term.length > 0){ 
       data.results.push({id: 0, text: query.term }); 
      } 
      $.each(items, function(){ 
       if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0){ 
        data.results.push({id: this.id, text: this.text }); 
       } 
      }); 
      query.callback(data); 
     } 
    }); 
});