来自服务器的响应未显示在 Select2 下拉列表中

Question

这是我的 ajax，用于在 select2 下拉列表中显示搜索项。但是有问题。我收到服务器响应，但该响应未显示在 select2 下拉列表中。

$('#txtTest').select2({
    minimumInputLength: 2,
    ajax: {
        url: "/student/list/",
        dataType: 'json',
        type: "Get",
        data: function(query) {
            alert(query.term);
            return { q: query.term };
        },
        processResults: function(data,page) {
            console.log(data);               
            return {
                results:data                    
            }
        }
    }
});

控制器

public JsonResult list(string q)
{
    var obj = (from c in db.selects 
               where c.name.ToLower().StartsWith(q.ToLower().Trim())         
               select new
               {
                   Id=c.ID,
                   Text=c.name
               }).ToList();
    return Json(obj, JsonRequestBehavior.AllowGet);
}

查看我的隐藏文本字段

<input type="hidden"  id="txtTest" class="input-xlarge" data-placeholder="Choose An Option.." /> 

Answer 1

看起来您正在使用 Select2 v4。如果是这种情况，您需要将隐藏的输入元素更改为选择元素。

来自Select2 4.0.0 beta 1 release notes：

<select> 已将<input type="hidden" /> 替换为所有选项 （包括远程数据）

你可以使用：

<select id="txtTest" class="input-xlarge" data-placeholder="Choose An Option..">
</select>

此外，您返回的对象应该具有id 和text 属性，而它们目前具有Id 和Text 属性。更改服务器代码以返回正确的属性名称，或更改您的 processResults 函数以更正对象。

processResults: function(data) {
    return {
        results: $.map(data, function(item) {
            return { id: item.Id, text: item.Text };
        })
    };
}

jsfiddle