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列表。

Answer 1

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

Answer 2

签出minimumSearchLength配置参数。 Here是文档。

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

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

2 个答案: