ruby-on-rails - Select2 查找现有的或键入新的总是将第一个选项显示为空白

Question

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

= hidden_​​field_tag :tags // 以 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

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

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

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