MarkMatch 上的 Select2 toUpperCase 错误

Posted 2023-05-07

【中文标题】MarkMatch 上的 Select2 toUpperCase 错误

【英文标题】：Select2 toUpperCase error on markMatch

【发布时间】：2014-01-07 07:01:12

【问题描述】：

所以我一直在使用 select2 进行非 ajax 查询，到目前为止它非常有用。但是，我想将下拉列表之一用于 ajax json 响应。在整个整体文档中，有一些关于如何使用它的花絮。

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

除了正在整理的代码示例，几乎没有任何 html 代码或 json 示例，我现在不知所措。

所以这是我得到的 json：

["ST_CD":"NY","ST_SHRT_NM":"New York","ST_CD":"NY","ST_SHRT_NM":"New York1"]

这很标准。我在文档中注意到您需要映射一个“id”和一个“text”才能使其工作。不知道为什么我不能直接接受它，但也几乎没有任何文档。

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

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

您需要在选项中提供 id 功能，因为您的 id 键 是“id”而不是“id”。

您还需要提供 formatResult 和 formatSelection 选项 因为你没有“文本”键。

这里有同样问题的用户：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 部分，那么我想看看它或者知道我做错了什么。

【问题讨论】：

只是一个猜测，但这可能是因为您用作id 的属性需要是唯一的吗？在示例 JSON 中，ST_CD 属性对于这两个值都设置为 "NY"。

我不认为 Select2 应该能够关心这一点，否则如果在前端，我会看到大量低效的加载。我实际上正在研究解决方案。我正在使用微风js 来处理数据获取和查询，而不是每次击键都必须从服务器获取。我从一次 fetch 加载，然后在客户端过滤每个新的击键。

【参考方案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":"New York","id":"NY","text":"New York1"]

自从我设置了 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 ;
            
        
    );
);