Select2 metin alanında ilk seçildikten sonra açılmıyor

Question

<li> öğelerinin listesini görüntülemek için jquery select2 eklentisini kullanıyorum, ancak <select> yerine bir giriş metni alanında. İşte benim html:

<div class="item-holder"> 
    <input type="hidden" name="item" id="item" value=""/> 
    <input type="text" name="item_name" id="item_name" placeholder="Select Item" autocomplete="off"/> 
    <ul class="item-list"> 
     <ul class="item-list list"> 
      <li>item 1</li> 
      <li>item 2 </li> 
      <li>item 3 </li> 
      <li>item 4 </li>         
     </ul> 
    </ul> 
</div> 

Ve kod şudur: Bu aşama her şey güzel ve pürüzsüz çalışır

$('#item_name').select2({ width: '185px', placeholder: "Select Item", allowClear : true}); 

$("#item_name").on('click', function(e) { 
    $(".item-list").toggle(); 
}); 

var options = { 
    valueNames : [ 'item_name' ] 
}; 

var brand_List = new List('item_holder', options); 

kadar. Listeden bir öğe seçtiğimde, seçimi klavye ile temizleyin ve listeden başka bir seçenek seçmek istiyorsanız, liste görünmez. select2 listesi ikinci kez görünmüyor gibi görünüyor. allowClear : true seçeneğini etkinleştirirsem 'temizle' düğmesini göremiyorum. Neyin yanlış gidiyor?

Herhangi bir yardım çok takdir edilecektir. Teşekkür ederim.

Answer 1

Temel olarak, açılır menüden select2 için seçenekler oluşturuyormuşsunuz gibi görünüyor. Böyle bir durumda, liste seçeneklerinden bir dizi oluşturabilir ve açılan menüden kurtulabilirsiniz.

var arr = []; 
$(".item-list.list li").each(function(i) 
{ 
    var obj = { 
    id: i, 
    text: $(this).text() 
    }; 
    arr.push(obj); 
}); 

$('ul.item-list').remove(); 

$('#item_name').select2({ 
    width: '185px', 
    allowClear: true, 
    multiple: true, 
    autocomplete: 'off', 
    maximumSelectionSize: 1, 
    placeholder: "Select Item",  
    data: arr 
}); 

Örnek: http://jsfiddle.net/DinoMyte/fyhsz9ra/427/