चुनिंदा चयन एकाधिक विकल्प JQuery प्लगइन

Question

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

Chosen.prototype.add_text_as_option = function() { 
    $('#id_select').append(
     $('<option>') 
       .html(this.search_field.val()) 
       .attr('selected', 'selected') 
       .attr('value', 0) 
    ); 
    $('#id_select').trigger("liszt:updated"); 
    return false; 
}; 

मैं जब भी उपयोगकर्ता प्रेस दर्ज करते हुए इनपुट क्षेत्र keydown_check समारोह के भीतर ध्यान में है इस समारोह कहते हैं।

मैं दो समस्याएं हैं:,

• शीर्ष प्राथमिकता है जब उपयोगकर्ता प्रेस दर्ज करें और एक विकल्प की सबस्ट्रिंग टाइप किया है, विकल्प का चयन किया जाएगा नहीं मिलता है, लेकिन स्ट्रिंग पाठ जोड़ा और चयन किया जाएगा। मैं क्या चाहता हूँ नहीं।

उदाहरण के लिए: यदि मैं विकल्प "foo" है, और टाइप "के लिए" शुरू, चुने हुए उम्मीदवार के रूप में पहले विकल्प ("foo") का प्रतीक होगा, इसलिए यदि मैं enter दबाएं, यह चयन किया जाना चाहिए , लेकिन इसके बजाय, क्या होता है कि "fo" को एक विकल्प के रूप में जोड़ा जाता है और चुना जाता है, जब मैं वास्तव में "foo" चुनना चाहता था।

यदि मैं एक क्लिक के साथ "foo" चुनता हूं, तो सब कुछ ठीक काम करता है। विकल्प चुने गए अंक का चयन किया जाता है और विकल्प के हिस्से के रूप में सबस्ट्रिंग टेक्स्ट लिया जाता है।

मैं सभी मूल कार्यक्षमताओं को खोए बिना चुने जाने के लिए एक गैर मौजूद विकल्प कैसे जोड़ सकता हूं?

• मैं चुने गए प्लगइन के अंदर चुने गए चुनिंदा एकाधिक फ़ील्ड को कैसे उपयोग कर सकता हूं? जैसा कि आप उपरोक्त कोड में देख सकते हैं, चुनिंदा एकाधिक फ़ील्ड की आईडी हार्डकोडेड है। जब मैं उपयोगकर्ता को नया विकल्प जोड़ता हूं तो मैं इसे रीफ्रेश करने में सक्षम होने के लिए ऐसा करना चाहता हूं।

• कार्यक्षमता है कि मैं के लिए देख रहा हूँ पहले से विजेट linkedin

धन्यवाद के कौशल के समान है!

Answer 1

आपको चुनिंदा प्लगइन से बाहर चयन 2 प्लगइन का प्रयास करना चाहिए, लेकिन यह गतिशील रूप से तत्वों को जोड़ने के साथ अच्छी तरह से काम करता है।

यहाँ लिंक: ऑटो tokenization के लिए उदाहरण पर http://ivaynberg.github.com/select2/

देखो मुझे लगता है कि हो सकता है आप के लिए क्या देख रहे हैं।

$(function() { 
    // form id 
    $('#newtag').alajax({ 
     // data contains json_encoded array, sent from server 
     success: function(data) { 
      // this is missing in alajax plugin 
      data = jQuery.parseJSON(data); 
      // create new option for original select 
      var opt = document.createElement("OPTION"); 
      opt.value = data.id; 
      opt.text = data.name; 
      opt.selected = true; 
      // check if the same value already exists 
      var el = $('#tags option[value="' + opt.value + '"]'); 
      if(!el.size()) { 
       // no? append it and update chosen-select field 
       $('#tags').append(opt).trigger("chosen:updated"); 
      } else { 
       // it does? check if it's already selected 
       if(!el[0].selected) { 
        // adding already existent element in selection 
        el[0].selected = true; 
        $('#tags').trigger("chosen:updated"); 
       } else { 
        alert("Already selected and added."); 
       } 
      } 


     } 
    }) 
}); 

"#" newtag एक रूप है:

Answer 2

बस इसे keyup_check keydown_check कहा जाता है से पहले दबाया पत्र के विपरीत keyup_check

Answer 3

मैं जरूरत यह आज तो मैं कुछ इस तरह लिखा आरंभ नहीं हो जाता फोन , ".alajax" plugin है जो एसिंक तरीके से फ़ॉर्म डेटा भेजता है और जेएसओएन प्रारूप में सर्वर की प्रतिक्रिया देता है। नियंत्रक में मैं जांचता हूं कि कोई टैग मौजूद है या नहीं, अन्यथा मैं इसे बना देता हूं। जवाब में मैं पांच "jsoned" टैग ऑब्जेक्ट।

Answer 4

मैंने चुने गए jquery का jsfiddle बनाया जो पाठ लेता है और विकल्प के रूप में बनाता है।चुने गए jquery के पुराने संस्करण में सुविधा बनाने का विकल्प है।

create_option: true; 
persistent_create_option: true; 
skip_no_results: true; 

आप इस कोड का उपयोग कर सकते हैं:

$('#id_select').chosen({ 
    width: '100%', 
    create_option: true, 
    persistent_create_option: true, 
    skip_no_results: true 
}); 

jsfiddle लिंक: https://jsfiddle.net/n4nrqtek/

Answer 5

मैंने पाया एक समाधान एकाधिक चयन

var str_array = ['css','html']; 
$("#id_select").val(str_array).trigger("chosen:updated");