首次选择文本字段后 Select2 未打开

Question

我正在使用 jquery select2 插件来显示 <li> 项的列表，但在输入文本字段而不是 <select> 上。这是我的 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);

到目前为止，一切都运行良好。当我 select 列表中的一个项目，用键盘清除 selection，并想 select 列表中的另一个选项时，列表不会出现。 select2 列表似乎没有第二次出现。如果启用 allowClear : true 选项，我也看不到 'clear' 按钮。怎么了？

任何帮助将不胜感激。谢谢。

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/

首次选择文本字段后 Select2 未打开

Select2 not opening after first selection on text field

jquery

jquery-select2

select2