নির্বাচন 2 ড্রপডাউন কিন্তু ব্যবহারকারী দ্বারা নতুন মান অনুমতি?

Question

আমি মানগুলির একটি সেট সহ একটি ড্রপডাউন করতে চাই কিন্তু ব্যবহারকারীকে সেখানে একটি নতুন মান "তালিকাবদ্ধ" করার অনুমতি দেয় না listed

আমি দেখতে পাচ্ছি যে আপনি যদি মোডে এটি ব্যবহার করে থাকেন তবে সিলেক্ট 2 এটি সমর্থন tagsকরে তবে ট্যাগ ব্যবহার না করে কি এটি করার কোনও উপায় আছে?

Comments

সিলেক্ট 2 কখনই আমার পক্ষে কাজ করেনি, কমপক্ষে ক্রিয়েট সার্চচয়েস আমার জন্য 4.0.3.3 এ কখনও কাজ করেনি এবং আমি চাইনি যে আমার ব্যবহারকারীরা একই কীওয়ার্ডটি ফেরত দেওয়ার জন্য অজ্যাক্সটি অপেক্ষা করুক, তাই আমাকে নিজের লাইব্রেরিটি রোলআউট করতে হবে, আমি কেবল এটি ভাগ করে নেওয়ার কারণ আমি মনে করি এটি অন্যদের যারা আমার মতো এখনও বিভ্রান্ত রয়েছে তাদের সহায়তা করতে পারে, আপনি যদি আমার উত্তরটির সাথে একমত না হন তবে দয়া করে ভোট বাতিল করবেন না: github.com/razzbee/tagcomplete

— razzbee

Answer 1

সংস্করণ 4+ এর জন্য কেভিন ব্রাউন দ্বারা নীচে এই উত্তরটি দেখুন

সিলেক্ট ২.৩.২ এবং এর নীচে আপনি এর মতো কিছু ব্যবহার করতে পারেন:

$(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};
    }
  },
});

(নির্বাচিত ২ মেলিং তালিকার উত্তর থেকে নেওয়া, তবে লিঙ্কটি এখনই খুঁজে পাবে না)

Comments

দেরিতে প্রতিক্রিয়ার জন্য দুঃখিত তবে আপনার সমাধানের জন্য আপনাকে অনেক ধন্যবাদ! অন্য পোস্টারটি, আপনার জিস্ট বিটিডব্লুতে একটি লিঙ্ক পোস্ট করেছে যা আপনাকে দ্বিগুণ দুর্দান্ত করে তোলে! :)

— জনজহান

ruuenza দুর্দান্ত, ঠিক আমি যা খুঁজছিলাম

— ম্যাথিয়াস এস

যোগ করার পদ্ধতি selectOnBlur: trueকাজ করবে দয়া করে দেখুন: stackoverflow.com/questions/25616520/...

— আলিরেজা Fattahi

ভবিষ্যতের পাঠকদের জন্য কেবল শীর্ষস্থানীয়, আপনি সম্ভবত tags: []পাশাপাশি ব্যবহার করতে চান createSearchChoice।

— কেভিন ব্রাউন

উপরের লিঙ্কটি ভাঙা ভাঙা মনে হচ্ছে।

— ওল্ফার

Answer 2

চমৎকার উত্তর দ্বারা উপলব্ধ @fmpwizard Select2 3.5.2 এবং নীচের জন্য কাজ করে, কিন্তু এটি 4.0.0 কাজ করবে না ।

যেহেতু খুব তাড়াতাড়ি (তবে সম্ভবত এই প্রশ্নের আগে নয়), সিলেক্ট 2 "ট্যাগিং" সমর্থন করেছে: আপনি যদি তাদের অনুমতি দেন তবে ব্যবহারকারীরা তাদের নিজস্ব মান যুক্ত করতে পারবেন। এটি 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

এটি খুব কার্যকর ছিল @ মার্কাস

— ১৯৮০

আমি মনে করি আমি এই স্নিপেট একাধিকবার ব্যবহার করেছি।

— সাহু ভি কুমার

ডাবল চেক না করে কাজ করলে আপনি এই বিকল্পটি সিলেক্ট 2 এ অ্যাজেক্স অপশনগুলিতে যুক্ত না করে যুক্ত করেছিলেন। সিলেক্ট অজেক্সের জন্য

— জোহাইব

সংস্করণ সিলেক্ট 2 (4.0.0) এ এর ​​ওয়ার্কাইন এইভাবে: $ ("সিলেক্ট করুন")। : সত্য}}, টেমপ্লেট ফলাফল: ফাংশন (ডেটা) {var ফলাফল = ডেটা.স্টেক্সট; যদি (ডাটা.নিউঅપ્শন) {ফলাফল = ফলাফল + '(নতুন)';} রিটার্ন ফলাফল;}}); ধন্যবাদ @ কেভিন ব্রাউন

— এম সালাহ

এটি শীর্ষ প্রতিক্রিয়া হওয়া উচিত। আমি এটির জন্য কিছুক্ষণ অনুসন্ধান করেছিলাম এবং এই বিকল্পটি আমি প্রবন্ধটিতে দেখা প্রতিটি প্রশ্নের উত্তর দেয়।

— জাস্টিন

Answer 3

কোডটি বাঁচিয়ে রাখার স্বার্থে, আমি তার মন্তব্য থেকে @ রারাউঞ্জা ফিডলের কোড পোস্ট করছি ।

এইচটিএমএল

<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

আমি বেড়াতে গিয়েছিলাম তবে ক্রোমে এটি আমার পক্ষে কাজ করছে বলে মনে হয় না। আপনি কি নিশ্চিত?

— আইসডড্যান্ট

@ আইসডড্যান্ট কোডটি কাজ করছে। মিশ্রের বিন্দুটি এটি করাতে হবে যে এটি কীভাবে করা উচিত (নির্বাচনটি ফ্রিডલમાં লুকানো রয়েছে)

— মিশেল আয়রেস

আমি যখন ফিডলটিতে যাই তখন আমি কোথাও একটি সিলেক্ট 2 ড্রপডাউন দেখতে পাই না। আসলে ... কিছু করে এমন একটা উদাহরণ পেলে কি ভালো লাগবে না?

— আইসেডড্যান্ট

আমি কীভাবে বাহ্যিক উত্স থেকে ডেটা সেট করতে পারি? আমি বোঝাতে চাইছি যদি আমি কোনও নির্বাচিত দেশের এবং নির্বাচিত দেশের শহরগুলি নিজেই একটি ড্রপডাউন হিসাবে লোড করতে চাই?

— আলী ব্যাগ

Answer 4

যেহেতু এই উত্তরগুলির মধ্যে অনেকগুলি 4.0+ এ কাজ করে না, আপনি যদি এজ্যাক্স ব্যবহার করে থাকেন তবে আপনার সার্ভারটি বিকল্প হিসাবে নতুন মান যুক্ত করতে পারে। সুতরাং এটি এভাবে কাজ করবে:

1. মানটির জন্য ব্যবহারকারী অনুসন্ধান করে (যা সার্ভারের কাছে এজাক্স অনুরোধ করে)
2. মানটি যদি দুর্দান্ত পাওয়া যায় তবে বিকল্পটি ফিরে আসুন। যদি না থাকে তবে সার্ভারের এই বিকল্পটি যুক্ত করুন:[{"text":" my NEW option)","id":"0"}]
3. ফর্মটি জমা দেওয়ার পরে সেই বিকল্পটি ডিবিতে রয়েছে কিনা তা সংরক্ষণের আগে পরীক্ষা না করে দেখুন।

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;

বেশিরভাগ ক্ষেত্রে আমাদের সংবেদনশীল নিবন্ধের সাথে মানগুলির তুলনা করতে হবে। এবং এই কোডটি মিথ্যা প্রত্যাবর্তন করবে, যা ডাটাবেসে নকল রেকর্ড তৈরি করতে পরিচালিত করবে। তাছাড়া স্ট্রিং.প্রোটোটাইপ.লোকেলকম্পার () ব্রাউজার সাফারি দ্বারা সমর্থিত নয় এবং এই কোডটি এই ব্রাউজারে কাজ করবে না;

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

ভাল প্রতিস্থাপন করা হবে

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

Answer 9

সাহায্যকারীদের জন্য ধন্যবাদ, আমি নীচের কোডটি কোডইনিটার II এর মধ্যে দ্বিতীয়টি ব্যবহার করছি: সিলেক্ট 2 এর 3.5.3।

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]'};
        }
    },
});