jquery-select2 - 如何将选项动态绑定(bind)到 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”时，表中的相关数据将返回并绑定(bind)到选项。但是弹出列表没有显示。它仅在用户键入另一个字母后显示。

即，当用户键入“12”时，将绑定(bind)正确的数据并且不会显示列表。但是当用户输入“123”时，列表就会出现。但是，列表中的数据仅与“12”相关。当用户键入“1234”时，列表会显示与“123”相关的数据。

应该做什么，以便 select2 列表在绑定(bind)数据后立即动态显示。

Answer 1

我猜你错过了像这样在 select2 中按下 key up 触发事件$(document).on('keyup', '.ddlSegments', 函数 (e),请在这里检查 fiddle :Updated Fiddle