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

如果要對Select2執行此操作，則不再需要使用createSearchChoice ，只需使用tags選項即可。 現在，您根本就不會看到空白選項，因為根本沒有將其傳遞給Select2，因此缺少一些可以解釋該問題的信息。

即使您設置了占位符，Select2也會自動隱藏空白選項，我將始終建議您這樣做。 因此，駭人聽聞的解決方案是將placeholder選項設置為所需的任意值（“選擇一些標簽...”），但這僅在這實際上是一個空白選項而不僅僅是CSS問題的情況下才有效。 如果選擇2在您開始搜索時將其高亮顯示，則可以確定它是否為空白選項，因為它會自動高亮顯示第一個選項。

將此問題作為CSS問題會更有意義，因為某處的標記（或從createSearchChoice選擇的內容）應自動插入搜索結果的頂部，因此在某處可能會有太多填充。 因此，即使周圍有備用空白選項，它也會顯示在新創建的搜索選項下。