如何动态绑定选项到select2元素

Question

我是一个有用的助手，可以翻译文本。

我有一个select2下拉框，它必须在用户输入字母时动态获取选项。

HTML代码如下：

<select class="select2 select2-hidden-accessible ddlSegments" multiple=""></select>

这是一个触发用户每次输入字母的函数。

JS:

function GetSegmentsByKeyword(ddlSegments, keyword) {
    $(ddlSegments).html("").trigger("change");
    $.ajax({
        type: "POST",
        url: "/Common/GetSegmentsByKeyword",
        data: "{'keyword': " + JSON.stringify(keyword) + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",            
        success: function (response) {
            if (response.Segments.length > 0) {
                //bind data
                var options = "";
                var jsonObject = $.parseJSON(response.Segments);

                $.each(jsonObject, function (i, obj) {
                    options += '<option value="' + obj.SegmentValue + '">' + obj.DisplayName + '</option>';
                });

                $(ddlSegments).append(options);                
            }
        }
    });
}

这是我遇到的问题：
当用户输入例如“12”时，表中相关数据将被返回并绑定到选项上。但是弹出列表不会显示，只有在用户输入另一个字母后才会显示出来。
也就是说，当用户输入“12”时，正确的数据已经被绑定了，但列表没有显示。但是当用户输入“123”时，列表就显示出来了。然而，列表中的数据只与“12”有关。当用户输入“1234”时，列表显示的数据就与“123”有关。
应该怎么做，才能使select2列表在绑定数据后动态显示？

- Qwerty

Answer 1

我猜你可能忘了在select2中触发按键弹起事件，就像这个例子一样： $(document).on('keyup', '.ddlSegments', function (e)， 请在这里检查fiddle：更新的Fiddle

- Suraj Wasnik

Answer 2

请查看 minimumSearchLength 配置参数。这里是相关文档。

$('select').select2({
    minimumInputLength: 3 // only start searching when the user has input 3 or more characters
});

- codeMonkey