Select2下拉列表但允许用户使用新值？

7 回答

• 14

  For version 4+ check this answer below by Kevin Brown

  在Select2 3.5.2及更低版本中，您可以使用以下内容：

  $(selector).select2({
    minimumInputLength:1,
    "ajax": {
      data:function (term, page) {
        return { term:term, page:page };
      },
      dataType:"json",
      quietMillis:100,
      results: function (data, page) {
        return {results: data.results};
      },
      "url": url
    },
    id: function(object) {
      return object.text;
    },
    //Allow manually entered text in drop down.
    createSearchChoice:function(term, data) {
      if ( $(data).filter( function() {
        return this.text.localeCompare(term)===0;
      }).length===0) {
        return {id:term, text:term};
      }
    },
  });
  

  （取自select2邮件列表中的答案，但现在找不到链接）

  回复于 2024-04-29T22:16:15+08:00
• 91

  @fmpwizard提供的excellent answer适用于Select2 3.5.2及更低版本， but it will not work in 4.0.0 .

  从很早就开始（但可能不早于这个问题），Select2支持"tagging"：如果您允许，用户可以添加自己的值 . 这可以通过 tags 选项启用，您可以使用an example in the documentation .

  $("select").select2({
    tags: true
  });
  

  默认情况下，这将创建一个与他们输入的搜索词具有相同文本的选项 . 如果要以特殊方式标记它，可以修改所使用的对象，或者在选择对象后远程创建对象 .

  $("select").select2({
    tags: true,
    createTag: function (params) {
      return {
        id: params.term,
        text: params.term,
        newOption: true
      }
    }
  });
  

  除了作为通过 select2:select 事件传入的对象的易于标记的标记之外，额外属性还允许您在结果中稍微不同地呈现选项 . 因此，如果您希望通过在其旁边添加“（新）”来直观地表明它是一个新选项的事实，您可以执行类似这样的操作 .

  $("select").select2({
    tags: true,
    createTag: function (params) {
      return {
        id: params.term,
        text: params.term,
        newOption: true
      }
    },
    templateResult: function (data) {
      var $result = $("<span></span>");
  
      $result.text(data.text);
  
      if (data.newOption) {
        $result.append(" <em>(new)</em>");
      }
  
      return $result;
    }
  });
  

  回复于 2024-04-29T22:16:15+08:00
• 140

  只是为了让代码保持活着，我从his comment发布@rrauenza Fiddle's code .

  HTML

  <input type='hidden' id='tags' style='width:300px'/>
  

  jQuery

  $("#tags").select2({
      createSearchChoice:function(term, data) { 
          if ($(data).filter(function() { 
              return this.text.localeCompare(term)===0; 
          }).length===0) 
          {return {id:term, text:term};} 
      },
      multiple: false,
      data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
  });
  

  回复于 2024-04-29T22:16:15+08:00
• 4

  由于其中许多答案在4.0中不起作用，如果您使用的是ajax，则可以让服务器添加新值作为选项 . 所以它会像这样工作：

  • 用户搜索值（向服务器发出ajax请求）

  • 如果发现值很大，请返回选项 . 如果不是只让服务器附加这样的选项： [{"text":" my NEW option)","id":"0"}]

  • 提交表单时，只需检查该选项是否在数据库中，如果不在保存之前创建它 .

  回复于 2024-04-29T22:16:15+08:00
• 0

  改进@fmpwizard答案：

  //Allow manually entered text in drop down.
  createSearchChoice:function(term, data) {
    if ( $(data).filter( function() {
      return term.localeCompare(this.text)===0; //even if the this.text is undefined it works
    }).length===0) {
      return {id:term, text:term};
    }
  },
  
  //solution to this error: Uncaught TypeError: Cannot read property 'localeCompare' of undefined
  

  回复于 2024-04-29T22:16:15+08:00
• 1

  var text = 'New York Mills';
  var term = 'new york mills';
  return text.localeCompare(term)===0;
  

  在大多数情况下，我们需要将值与不敏感寄存器进行比较 . 此代码将返回false，这将导致在数据库中创建重复记录 . 此外，浏览器Safary不支持String.prototype.localeCompare（），此代码在此浏览器中不起作用;

  return this.text.localeCompare(term)===0;
  

  将更好地取代

  return this.text.toLowerCase() === term.toLowerCase();
  

  回复于 2024-04-29T22:16:15+08:00
• 11

  感谢帮助人员，我在Codeigniter中使用了以下代码我正在使用版本：select2的3.5.2 .

  var results = [];
  var location_url = <?php echo json_encode(site_url('job/location')); ?>;
  $('.location_select').select2({
      ajax: {
          url: location_url,
          dataType: 'json',
          quietMillis: 100,
          data: function (term) {
              return {
                  term: term
              };
          },
          results: function (data) {
              results = [];
              $.each(data, function(index, item){
                  results.push({
                      id: item.location_id,
                      text: item.location_name
                  });
              });
              return {
                  results: results
              };
          }
      },
      //Allow manually entered text in drop down.
      createSearchChoice:function(term, results) {
          if ($(results).filter( function() {
              return term.localeCompare(this.text)===0; 
          }).length===0) {
              return {id:term, text:term + ' [New]'};
          }
      },
  });
  

  回复于 2024-04-29T22:16:15+08:00