MVC Razor页面Select2自动补全无法填充问题求助

问题场景 #

在MVC Razor页面使用Select2自动补全控件时，用户输入内容后控件持续显示“Searching..”，无法加载选项。但Web API已正确返回对应数据，且能在processResults函数中打印看到数据。

现有代码 #

Razor/MVC 代码

<div class="row">
    <div class="col-sm-12">
        <label class="control-label labelFont">Add SimplyBiz member</label>
        <div class="form-group">
            <div class="col-md-12">
                @Html.DropDownList("multiselect_autocomplete", new MultiSelectList(Enumerable.Empty<SelectListItem>()), new { @class = "autocomplete-members" })
            </div>
        </div>
    </div>
</div>

JavaScript/JQuery 代码

$(".autocomplete-members").select2({
    minimumInputLength: 3,
    ajax: {
        url: '@(Url.Action("MultipleMemberSearchAutoComplete"))',
        data: function (params) {
            return {
                term: params.term// search term
            };
        },
        processResults: function (data) {
            console.log("on process results");
            console.log(data);
            $.each(data, function (index, option) {
                console.log("option");
                console.log(option);
                console.log(option.memberid + ' - ' + option.name);
                $('#multiselect_autocomplete').append($('<option></option>').attr('value', option.memberid).text(option.label).attr('title', option.name));
            });

            return {
                results: data.items
            }
        },
    }
});

问题原因及修复方案 #

1. 错误的结果返回路径：你在processResults中返回results: data.items，但从控制台打印的data能看出，API返回的直接是数据数组，并没有items属性，导致Select2接收不到有效结果集，一直处于搜索状态。
2. 多余的手动添加option操作：Select2会自动根据返回的结果渲染选项，手动往select标签里追加option的操作完全没必要，反而可能引发控件状态冲突。
3. 数据格式不匹配Select2要求：Select2默认要求每个选项对象包含id和text属性，你的返回数据用的是memberid和label/name，需要映射成标准格式。

修改后的JavaScript代码 #

$(".autocomplete-members").select2({
    minimumInputLength: 3,
    ajax: {
        url: '@(Url.Action("MultipleMemberSearchAutoComplete"))',
        data: function (params) {
            return {
                term: params.term// search term
            };
        },
        processResults: function (data) {
            // 将API返回的数据映射为Select2需要的标准格式
            const formattedResults = data.map(item => ({
                id: item.memberid,
                text: `${item.memberid} - ${item.name}` // 自定义选项显示文本
            }));
            
            console.log("格式化后的结果:", formattedResults);
            
            // 返回正确的结果集
            return {
                results: formattedResults
            };
        }
    }
});

额外说明 #

• 确保API返回的data是合法的JSON数组，每个元素包含memberid和name（或label）属性。
• 移除手动添加option的代码后，Select2会完全接管选项的渲染和管理，避免出现控件状态异常。

内容的提问来源于stack exchange，提问作者chosenOne Thabs