Select2がテキストフィールドで最初に選択された後に開かない

Question

<select>ではなく、入力テキストフィールドに<li>のリストを表示するためにjquery select2プラグインを使用しています。ここに私の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> 

そして、私のコードはこれです：すべてがうまく、スムーズな動作します。この段階まで

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

。リストから項目を選択し、キーボードで選択を消去し、リストから別のオプションを選択する場合は、リストは表示されません。 select2のようなリストは2度目に表示されません。 allowClear : trueオプションを有効にすると、[クリア]ボタンも表示されません。何がうまくいかない？

ご協力いただければ幸いです。ありがとうございました。

Answer 1

基本的にドロップダウンメニューからselect2のオプションを構築しているようです。そのような場合は、リストオプションから配列を作成し、ドロップダウン自体を取り除くことができます。

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

例：http://jsfiddle.net/DinoMyte/fyhsz9ra/427/