Select2：使用ajax数据源时添加和选择手动值

Posted 2023-05-07

【中文标题】Select2：使用ajax数据源时添加和选择手动值

【英文标题】：Select2: Add and select manual values when using ajax data source

【发布时间】：2015-08-22 00:05:57

【问题描述】：

我想用 select2(4.0.0) 和 jquery(2.1.4) 实现以下场景：

我有一个从外部源（Java 应用服务器上的端点）获取数据的选择框 用户可以选择返回的值之一，也可以提出自己的值 现在当用户提交表单并且服务器端的验证失败时，我想显示用户之前提供的所有值的表单，因此选择框应该将值发送到服务器。

实现这一目标

我使用 ajax from select 从服务器查询数据 我使用 createTag 允许用户创建自己的值 我想使用 initSelection 用用户之前添加的值预填充选择框。

我的代码如下所示：

$("select[name='serie']").select2(
    ajax: 
        url: "http://javaendpoit/serie/filter",
        dataType: 'json',
        delay: 250,
        data: function (params) 
          return 
            name: params.term,
            page: params.page
          ;
        ,
        processResults: function (data, page) 
          return 
            results: $.map(data, function (item) 
              return 
                text: item.name,
                name: item.name,
                id: item.name
              
            )
          ;
        ,
        cache: true
      ,
      escapeMarkup: function (markup)  return markup; ,
      minimumInputLength: 2,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection,
      tags: true,
      createTag: function (tag) 
        return 
          id: tag.term,
          text: tag.term,
          name: tag.term,
          isNew : true
        ;
      ,
      /* below part is rendered by jsp so that it has the value from previous form submission; if it is initial form render the below part is not included */
      initSelection : function (element, callback) 
            callback(id:"Name",name:"Name","text":"Name");
         
    );

 function formatRepo (serie) 
        if (serie.loading) return serie.text;
        var markup = '<div class="clearfix">' +
        '<div clas="col-sm-10">' +
        '<div class="clearfix">' +
        '<div class="col-xs-12">' + serie.name + '</div>' +
        '</div>';
        markup += '</div></div>';
        return markup;
  

  function formatRepoSelection (serie) 
    return serie.name;
  

这很好用。这意味着提交后我可以在选择框中看到值名称，它是选定的值。不过，如果我再次尝试提交此表单，请求中的值会丢失。

按照此处主题数量的建议，我添加了以下行（见最后一行）。

  /* [...] */
  initSelection : function (element, callback) 
        callback(id:"Name",name:"Name","text":"Name");
     
).select2("val","Name");

但是在添加这个之后，值 Name 在 select2 框中甚至不可见。

我已经尝试修复它几个小时了，但不知何故找不到正确的解决方案。我敢打赌我错过了一些基本的东西。请帮忙！

--- [编辑]

添加 data 后，即使使用 val 设置值，我也可以看到值 Name 但是，如果我重新提交表单，请求中仍然不存在该值.

.select2('data',id:"Name",name:"Name","text":"Name")
.select2('val', "Name")

--- [编辑 2]

在 html 中我使用 select 来创建这个元素。

<select class="form-control" name="serie"></select>

【问题讨论】：

This mailing list thread 可能会为您提供一些有关如何执行此操作的指示。

另外，在 Select2 4.0.0 中，select2('data') 方法是不可写的，如果在初始化 Select2 时设置了debug: true，则会触发警告。

嗨。谢谢。我以前看过这个帖子，但直到我们之前没有回复。我还检查了那里提出的解决方案（*** 的链接），但没有任何帮助。不过，我会尝试在周末重新运行那里显示的示例，也许我错过了一些东西。关于 select2('data')，这就解释了为什么没有考虑其中指定的值。

嗨凯文！正如您在邮件列表线程中建议的那样，我能够在不使用 initSelection 的情况下解决问题。谢谢！

邮件列表没有提供任何解决方案来初始化语言环境数据，然后从 ajax 源加载数据。初始 html 未显示在 select2 下拉列表中。有什么解决办法吗？

【参考方案1】：

我设法用 select2 版本 4.0.2 做到这一点：

$("select[name='serie']").data('select2')
    .dataAdapter.select(
        id:"Name",
        name:"Name",
        "text":"Name"
    );

【参考方案2】：

多亏了 Kevin，我才得以解开这个谜题。所以最终我放弃了使用initSelection。相反，我只是用应该选择的选项填充选择标签。

<select class="form-control" id="author" name="author" multiple="multiple">
  <option value="name" selected="selected">name</option>
</select>

从 select2 定义中删除了 initSelection

$("select[name='author']").select2(
    ajax: 
        url: "http://javaendpoit/serie/filter",
        dataType: 'json',
        delay: 250,
        data: function (params) 
            return 
                name: params.term,
                page: params.page
            ;
        ,
        processResults: function (data, page) 
            return 
                results: $.map(data, function (item) 
                    return 
                        text: item.name,
                        name: item.name,
                        id: item.name
                    
                )
            ;
        ,
        cache: true
    ,
    escapeMarkup: function (markup) 
        return markup;
    ,
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection,
    tags: true,
    createTag: function (tag) 
        return 
            id: tag.term,
            text: tag.term,
            name: tag.term,
            isNew: true
        ;
    
);

并更改了 formatRepoSelection 以使用没有 name 属性的值。

function formatRepoSelection(serie) 
    if (serie.name === undefined) 
        return serie.text;
     else 
        return serie.name;
    

我想我不能在 formatRepo 中使用 name 属性，并且可以删除 formatRepoSelection 的 if 子句。但这只是一个小问题。