Select2 ड्रॉपडाउन लेकिन उपयोगकर्ता द्वारा नए मूल्यों की अनुमति दें?

Question

मैं मूल्यों के एक सेट के साथ एक ड्रॉपडाउन करना चाहता हूं, लेकिन उपयोगकर्ता को वहां सूचीबद्ध नहीं किए गए एक नए मूल्य का "चयन" करने की अनुमति देता है।

मैं देखता हूं कि यदि आप इसे मोड में उपयोग कर रहे हैं, तो select2 इसका समर्थन करता tagsहै, लेकिन क्या टैग का उपयोग किए बिना इसे करने का एक तरीका है?

Comments

Select2 ने मेरे लिए कभी काम नहीं किया, कम से कम createSearchChoice ने मेरे लिए कभी भी 4.0.3 में काम नहीं किया, और मैं नहीं चाहता था कि मेरे उपयोगकर्ता उसी कीवर्ड को वापस करने के लिए ajax का इंतजार करें, इसलिए मुझे अपनी खुद की लाइब्रेरी को रोल करना होगा, मैं केवल इसे साझा करना क्योंकि मुझे लगता है कि यह दूसरों को मदद कर सकता है जो अभी भी उलझन में हैं जैसा कि मैं था, कृपया वोट न करें यदि आप मेरे जवाब से असहमत हैं: github.com/razzbee/tagcomplete

— razzbee

Answer 1

संस्करण 4+ के लिए केविन ब्राउन द्वारा नीचे दिए गए इस उत्तर की जाँच करें

Select2 3.5.2 और नीचे में, आप कुछ का उपयोग कर सकते हैं:

$(selector).select2({
  minimumInputLength:1,
  "ajax": {
    data:function (term, page) {
      return { term:term, page:page };
    },
    dataType:"json",
    quietMillis:100,
    results: function (data, page) {
      return {results: data.results};
    },
    "url": url
  },
  id: function(object) {
    return object.text;
  },
  //Allow manually entered text in drop down.
  createSearchChoice:function(term, data) {
    if ( $(data).filter( function() {
      return this.text.localeCompare(term)===0;
    }).length===0) {
      return {id:term, text:term};
    }
  },
});

(Select2 मेलिंग सूची पर एक उत्तर से लिया गया है, लेकिन अभी लिंक नहीं मिल सकता है)

Comments

देर से प्रतिक्रिया के लिए क्षमा करें, लेकिन आपके समाधान के लिए बहुत बहुत धन्यवाद! अन्य पोस्टर, आपके जिस्ट btw के लिए एक लिंक पोस्ट किया है जो आपको दोगुना भयानक बनाता है! :)

— जॉन्जोहॉन

Rrauenza भययोग्य, वास्तव में मैं क्या देख रहा था

— Matthias S

जोड़ने से selectOnBlur: trueकाम चल जाएगा कृपया देखें: stackoverflow.com/questions/25616520/…

— Alireza Fattahi

भविष्य के पाठकों के लिए बस एक सिर, आप शायद tags: []के साथ प्रयोग करना चाहते हैं createSearchChoice।

— केविन ब्राउन

ऊपर लगा हुआ फील टूटा हुआ लगता है।

— वोल्फ

Answer 2

उत्कृष्ट जवाब द्वारा प्रदान की @fmpwizard Select2 3.5.2 और नीचे के लिए काम करता है, लेकिन यह 4.0.0 में काम नहीं करेगा ।

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

$("select").select2({
  tags: true
});

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

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  }
});

select2:selectघटना के माध्यम से पारित वस्तु पर एक आसान से स्पॉट फ्लैग के रूप में सेवा करने के अलावा , अतिरिक्त संपत्ति भी आपको परिणाम में विकल्प को थोड़ा अलग तरीके से प्रस्तुत करने की अनुमति देती है। इसलिए यदि आप इस तथ्य को नेत्रहीन रूप से संकेत देना चाहते हैं कि यह एक नया विकल्प है " बगल में (नया) " , तो आप इसके साथ कुछ कर सकते हैं।

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
  templateResult: function (data) {
    var $result = $("<span></span>");

    $result.text(data.text);

    if (data.newOption) {
      $result.append(" <em>(new)</em>");
    }

    return $result;
  }
});

Comments

यह बहुत उपयोगी था @ Markus1980Wien

— abiieez

मुझे लगता है कि मैंने कई बार इस स्निपेट का इस्तेमाल किया है।

— साहू वी कुमार

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

— Zohaib

इस तरह से वर्जन select2 (4.0.6) में इसका वर्काइन: $ ("select")। select2 ({टैग: true, createTag: function (params) {return {id: params.term, text: params.term, newOption। : true}}, templateResult: function (data) {var result = data.text; अगर (data.newOption) {result = result + ’(नया)’;} return result;}}}; धन्यवाद @ केविन ब्राउन

— एम। सलाह

यह शीर्ष प्रतिक्रिया होनी चाहिए। मैं इसके लिए कुछ समय से खोज कर रहा था, और यह विकल्प इस विषय पर मेरे द्वारा देखे गए प्रत्येक प्रश्न का उत्तर देता है।

— जस्टिन

Answer 3

बस कोड को जीवित रखने के लिए, मैं अपनी टिप्पणी से @rrauenza Fiddle का कोड पोस्ट कर रहा हूं ।

एचटीएमएल

<input type='hidden' id='tags' style='width:300px'/>

jQuery

$("#tags").select2({
    createSearchChoice:function(term, data) { 
        if ($(data).filter(function() { 
            return this.text.localeCompare(term)===0; 
        }).length===0) 
        {return {id:term, text:term};} 
    },
    multiple: false,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

Comments

मैं फिडल में गया था, लेकिन लगता है कि यह मेरे लिए क्रोम में काम नहीं कर रहा है। क्या आप पुष्टि कर सकते हैं?

— IDDante

@IcedDante कोड काम कर रहा है। फिडेल में बिंदु यह दिखाने के लिए है कि यह कैसे किया जाना चाहिए (चयन फिडेल में छिपा हुआ है)

— मिशेल एरेस

जब मैं फिडल में जाता हूं तो मुझे कहीं भी एक चयन 2 ड्रॉपडाउन नहीं दिखता है। क्या ऐसा उदाहरण देना अच्छा नहीं होगा कि वास्तव में ... कुछ करता है?

— इडेडांटे

मैं बाहरी स्रोत से डेटा कैसे सेट कर सकता हूं? मेरा मतलब है कि अगर मैं एक चयनित देश के शहरों को लोड करना चाहता हूं और चयनित देश खुद एक ड्रॉडाउन है?

— अली बेग 12

Answer 4

चूँकि इनमें से कई उत्तर 4.0+ में काम नहीं करते हैं, यदि आप ajax का उपयोग कर रहे हैं, तो आप सर्वर को विकल्प के रूप में नया मान जोड़ सकते हैं। तो यह इस तरह काम करेगा:

1. मूल्य के लिए उपयोगकर्ता खोज (जो सर्वर से अजाक्स अनुरोध करता है)
2. यदि मान महान पाया जाता है, तो विकल्प वापस करें। यदि सर्वर के पास ऐसा विकल्प नहीं है, तो:[{"text":" my NEW option)","id":"0"}]
3. जब फॉर्म सबमिट किया जाता है, तो यह देखने के लिए जांचें कि क्या वह विकल्प db में है और यदि बचत करने से पहले इसे नहीं बनाते हैं।

Answer 5

एक बेहतर उपाय है जो मुझे लगता है कि अब है

बस चयनित विकल्पों पर सच करने के लिए टैगिंग सेट करें?

tags: true

से https://select2.org/tagging

Answer 6

@Fmpwizard उत्तर पर सुधार:

//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
  if ( $(data).filter( function() {
    return term.localeCompare(this.text)===0; //even if the this.text is undefined it works
  }).length===0) {
    return {id:term, text:term};
  }
},

//solution to this error: Uncaught TypeError: Cannot read property 'localeCompare' of undefined

Comments

मैंने इसे एक मामूली संशोधन के साथ इस्तेमाल किया मैं अपना जवाब एक दूसरे में डालूंगा लेकिन धन्यवाद।

— सैम

Answer 7

मैं बस केविन ब्राउन से इस पर ठोकर खाई। https://stackoverflow.com/a/30019966/112680

आपको बस इसके लिए पैरामीटर v4.0.6का उपयोग tags: trueकरना है।

Answer 8

var text = 'New York Mills';
var term = 'new york mills';
return text.localeCompare(term)===0;

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

return this.text.localeCompare(term)===0;

की जगह बेहतर होगा

return this.text.toLowerCase() === term.toLowerCase();

Answer 9

मदद लोगों के लिए धन्यवाद, मैंने कोडाइनिटर II के भीतर नीचे दिए गए कोड का उपयोग किया है: select2 के 3.5.2 संस्करण का उपयोग कर रहा हूं।

var results = [];
var location_url = <?php echo json_encode(site_url('job/location')); ?>;
$('.location_select').select2({
    ajax: {
        url: location_url,
        dataType: 'json',
        quietMillis: 100,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            results = [];
            $.each(data, function(index, item){
                results.push({
                    id: item.location_id,
                    text: item.location_name
                });
            });
            return {
                results: results
            };
        }
    },
    //Allow manually entered text in drop down.
    createSearchChoice:function(term, results) {
        if ($(results).filter( function() {
            return term.localeCompare(this.text)===0; 
        }).length===0) {
            return {id:term, text:term + ' [New]'};
        }
    },
});