选择2查找现有或键入新始终显示第一个选项为空白

Question

我添加了一个select2，它总是将第一个选项显示为空白。 在空白选项下面，它总是显示我在select2文本字段中输入的内容。任何想法，我如何解决它。

    = hidden_​​field_tag：标签//以HAML形式出现

// javascript 
$('#tags').select2
createSearchChoice: (term, data) ->
  if $(data).filter((->
      @text.localeCompare(term) == 0
    )).length == 0
    return {
      id: term
      text: term
    }
  return
multiple: false
data: [
  {
    id: 0
    text: 'story'
  }
  {
    id: 1
    text: 'bug'
  }
  {
    id: 2
    text: 'task'
  }`enter code here`
]

Answer 1

试试这个......

您的输入字段应该是这样的

%input#tags{:style => "width: 300px", :type => "hidden"}

你的js代码应该是这样的

$("#tags").select2({
  placeholder:"Select an option",  
  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'
    }
  ]
});

Answer 2

如果您想使用Select2执行此操作，则不再需要使用createSearchChoice，您只需使用tags选项即可。现在你不应该看到空白选项，因为你根本没有将它传递给Select2，所以这里缺少一些可以解释 问题的信息。

如果你有一个占位符集，

Select2会自动隐藏空白选项，我总是建议这样做。因此，hacky解决方案是将placeholder选项设置为您想要的任何内容（“选择一些标签......”），但这只有在这实际上是一个空白选项而不仅仅是CSS问题时才有效。如果Select2在您开始搜索时突出显示它，您可以判断它是否为空白选项，因为它会自动突出显示第一个选项。

因为标签（或来自createSearchChoice的选项）应该自动插入搜索结果的顶部，因此将CSS作为CSS问题更有意义，可能有点过多填充。因此，即使有一个备用空白选项，它也会在下显示新创建的搜索选项。