Select2 öffnet sich nicht nach der ersten Auswahl im Textfeld

Question

Ich benutze jquery select2 plugin, um eine Liste von <li> Elementen anzuzeigen, aber auf einem Eingabetextfeld anstelle von <select>. hier ist mein 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> 

Und mein Code ist dies:

$('#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); 

Bis zu dieser Phase alles fein und glatt funktioniert. Wenn ich ein Element aus der Liste auswähle, die Auswahl mit der Tastatur lösche und eine andere Option aus der Liste auswählen möchte, wird die Liste nicht angezeigt. scheint wie select2 Liste erscheint nicht zum zweiten Mal. Ich kann auch nicht die Schaltfläche "Löschen" sehen, wenn ich die Option allowClear : true aktiviere. Was läuft falsch?

Jede Hilfe wird sehr geschätzt. Vielen Dank.

Answer 1

Es scheint, als ob Sie im Grunde die Optionen für das select2 aus dem Dropdown-Menü erstellen. In diesem Fall können Sie ein Array aus den Listenoptionen erstellen und dann das Dropdown-Menü selbst entfernen.

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 
}); 

Beispiel: http://jsfiddle.net/DinoMyte/fyhsz9ra/427/