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

【问题标题】：How to dynamically bind options to a select2 element如何将选项动态绑定到 select2 元素
【发布时间】：2018-12-06 06:36:01
【问题描述】：

我有一个 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 列表。

【问题讨论】：

标签： jquery-select2 jquery-select2-4

【解决方案1】：

我猜你错过了触发 select2 中的按键事件，例如 $(document).on('keyup', '.ddlSegments', function (e), 请在这里检查小提琴：Updated Fiddle

【讨论】：

【解决方案2】：

查看minimumSearchLength 配置参数。 Here 是文档。

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

【讨论】：