json - markMatch 上的 Select2 toUpperCase 错误

Question

所以我一直在使用 select2 进行非 ajax 查询，到目前为止它非常有帮助。但是，我想使用其中一个下拉列表来进行 ajax json 响应。在整个庞大的文档中，出现了一些小技巧来展示如何使用它。

整体文档:http://ivaynberg.github.io/select2/

除了被压缩的代码示例之外，几乎没有任何 html 代码或 json 示例，我现在感到不知所措。

这是我得到的 json:

[{"ST_CD":"NY","ST_SHRT_NM":"纽约"},{"ST_CD":"NY","ST_SHRT_NM":"纽约1"}]

这是相当标准的。我在文档中注意到，您需要映射“id”和“text”才能使其工作。不知道为什么我不能就这样接受，但也几乎没有任何相关文档。

https://groups.google.com/forum/#!topic/select2/rDPFU0IWpE0

select2 的作者提到了这些关键事实:

you need to provide an id function in the options because your id key is "Id" instead of "id".

you also need to provide formatResult and formatSelection options because you dont have a "text" key.

这里遇到同样问题的用户:https://github.com/ivaynberg/select2/issues/693也表明这是准确的。

但是，这对我来说不起作用。

$(document).ready(function () {
    $("#e6").select2({
        id: function(e) { return e.ST_CD },
        placeholder: "Search for a movie",
        minimumInputLength: 1,
        ajax: {
            url: "api/VendorLocation",
            dataType: 'json',
            data: function (term, page) {
                return {};
            },
            results: function (data, page) {
                return { results: data };
            },
            formatResult: function (item) { return item.ST_SHRT_NM; },
            formatSelection: function (item) { return item.ST_SHRT_NM; }
        }
    });
});

在ajax函数的返回结果部分，数据对象被正确填充。它有我需要的数据(ST_CD 和 ST_SHRT_NM 有正确的值)，当我继续时，那就是我收到错误的时候。无论 formatResult 和 formatSelection 是否存在，都会出现相同的错误。

所以我调试到 Select2，这就是错误出现的地方:

$.fn.select2.defaults = {
    (...)
    formatResult: function (result, container, query, escapeMarkup) {
        var markup = [];
        markMatch(result.text, query.term, markup, escapeMarkup);
        return markup.join("");
    },
    (...)
}

在此代码中，结果对象已填充，但文本属性未定义。

我认为格式化我的json数据以遵守前端html控件的标准，或者进行任何类型的json解析确实不合理。如果有一种方法可以让 select2 明确指定文本和 id 部分，那么我想看看它或知道我做错了什么。

Answer 1

自从我问这个问题以来已经有一段时间了，但在我问这个问题一周后我想出了一个解决方案。所以我决定现在回答这个问题..刚刚创建了一个 DTO，它映射到 EF 使用 linq 创建的实际实体:

所以在服务器端:

public class StateDTO
{
    public string id { get; set; }
    public string text { get; set; }
}

然后是在发回之前被命中的查询

//the context is generated from EF
public IQueryable<StateDTO> Get(string st_name)
{
    return (
        from state in this.context.States
        where state.ST_SHRT_NM.Contains(st_name)
        select new StateDTO() { id = state.ST_CD,
                               text = state.ST_SHRT_NM,
                             });
}

我得到以下结果:[{"id":"NY","text":"纽约"},{"id":"NY","text":"纽约1"}]

自从我设置了 select2 配置后，它就起作用了:

$(document).ready(function () {
    $("#e6").select2({
        placeholder: "Search for a movie",
        minimumInputLength: 1,
        ajax: {
            url: "api/States",
            dataType: 'json',
            data: function (term, page) {
                return {};
            },
            results: function (data, page) {
                return { results: data };
            }
        }
    });
});