Select2 4.0.0不能選擇結果

我想使用最新版本的Select2查詢我的網站的API並返回一個多選。它獲取正確的數據，甚至可以正確格式化下拉菜單，將返回對象中的兩個鍵合併爲「（A-123）John Johnson」，但下拉菜單沒有響應鼠標懸停或點擊。Select2 4.0.0不能選擇結果

我正在使用select2.full.min.js和select2.min.css文件。爲了項目的目的，我將它們包含在目錄中，並通過cshtml中的Bundles訪問它們，而不是通過CDN訪問它們。

HTML：

<div> 
    <select class="user-list" multiple="multiple" style="width: 100%"> 
    </select> 
</div>

目前，它看起來像這一點，這就是我想要的： properly-formatted dropdown

不知道這是否是相關的，但是當我瀏覽生成的源代碼在搜索時，輸入看起來很好，但下拉的代碼呈灰色，好像它隱藏了一樣。

solid/opaque input code

greyed out dropdown code

每我已經在這裏和其他地方發現了其他的建議，我已經嘗試了一些不同的解決方案。我最終發現了templateResult和templateSelection應該如何工作（不是特別感謝文檔），並嘗試返回ID，但我仍然無法真正選擇任何東西，甚至在我將鼠標懸停在上面時得到響應選項。

這裏是我最終結束了，包括一些調試，以確保返回的對象是有效的。

JS：

 // Setup autocomplete/select for User filter 
     $(".user-list").select2({ 
      ajax: { 
       url: "[api url]", 
       type: "GET", 
       dataType: "json", 
       data: function (params) { 
        return { 
         search: params.term, // search term 
         page: params.page 
        }; 
       }, 
       processResults: function (data) { 
        console.log(JSON.stringify(data)); 
        return { 
         results: data 
        }; 
       }, 
      }, 
      escapeMarkup: function (markup) { return markup; }, 
      id: function (data) { return data.Id.toString(); }, 
      minimumInputLength: 1, 
      templateResult: function (data, page) { 
       return "(" + data.User + ") " + data.Name; 
      }, 
      templateSelection: function (data, page) { 
       return "(" + data.User + ") " + data.Name; 
      } 
     })

ID是一個GUID，還有其他兩個領域，我會打電話給名和用戶。

數據樣本：

[ 
    { 
     "Id":"a1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1", 
     "Name":"John Johnson", 
     "User":"A-123" 
    }, 
    { 
     "Id":"b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2", 
     "Name":"Tom Thompson", 
     "User":"B-456" 
    } 
]

我不想增加的問題一堆，似乎是這個，但我發現大多數成果已爲老版本顯著不同的選擇，他們只是還沒有爲我工作。

來源

2015-07-11 MikeOShay

也許有點不規則上我自己的問題發表意見，但我不知道爲什麼我會m沒有任何實際反饋而被低估。我在這個插件的新版本中沒有看到有關幫助主題或故障排除文檔的信息，我認爲這個問題足以幫助任何人，而我在這裏就自己的問題提供了儘可能詳細的信息。 – MikeOShay

在這裏看看：http://stackoverflow.com/questions/29035717/select2-load-data-using-ajax-cannot-select-any-option 請注意，你有'ID'屬性 - 而不是'ID'，這可能導致問題。 – akn

這是它的一部分。不喜歡繼續關注文檔，但對我而言，它並沒有明確規定該要求，也不知道如何處理數據或如何使用templateResult或templateSelection。要真正瞭解這一點，實際上你必須在文檔站點本身查看源代碼HTML和JS，這是教人們使用插件的一種非常糟糕的方式。無論哪種方式，我想出了哪些選項與新版本相關，並得到它返回「ID」而不是「ID」，它的工作。 – MikeOShay

select2的操作方式是，它使用每個數據對象的「id」值並將它們放入原始Select元素作爲選定的選項。這是區分大小寫的。

默認情況下，它會根據數據對象的「文本」值顯示下拉選項和所選元素。這不允許自定義格式。

如果（像我一樣）要返回不同的數據選項，您仍然需要在ajax下的processResults選項返回的對象中將字段返回爲「id」，或將字段重新映射爲「id」。然後使用templateResult和templateSelection設置以及其他返回的數據來顯示您想要的內容。

如果您正確地返回並解析除id之外的所有內容，您可能會收到一個功能清單，但無法選擇任何選項。

我的項目對下拉菜單的要求有所改變，但這裏是我結束的地方。它工作正常，多= =「多個」屬性添加到使其成爲一個多選。

<select class="select2" style="width:100%; height: 100%;"> 
    <option></option> 
</select> 

$(".select2").select2({ 
    ajax: { 
     url: "[api url]", 
     method: "get", 
     data: function (params) { 
      return { 
       search: params.term 
      }; 
     }, 
     processResults: function (data) { 
      return { 
       results: data 
      }; 
     }, 
     cache: true 
    }, 
    placeholder: "Enter a User ID or Name", 
    templateResult: function(data) { 
      return "(" + data.user + ") " + data.name; 
    }, 
    templateSelection: function(data) { 
     return "(" + data.user + ") " + data.name; 
    } 
}).ready(function() { 
    $(".select2-selection__placeholder").text("Enter a User ID or Name") 
})

這是我最初的問題的可能一部分在實施修復老版本選擇二的，它有一個完全不同的可用選項/設置，所有的嘗試。

此外，還有一點注意，「佔位符」屬性目前不支持自定義模板。它試圖強制佔位符文本轉換爲結果格式，該格式顯示使用此代碼「（未定義）未定義」。要修復它，需要一個空白選項並替換select2.ready上的文本。

來源

2015-07-21 20:41:55 MikeOShay

我有同樣的問題。解決方案：補充這一部分：

_.each(data.ResultObject, function (item) { item.id = item.K_CONTACT; });

（使用下劃線）

我的init

$(".js-data-example-ajax").select2({ 
    ajax: { 
     url: "api/MyApi/MyApi", 
     method: "POST", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
      return { 
       SearchPart: params.term, // search term 
       page: params.page 
      }; 
     }, 
     processResults: function (data, params) { 

      params.page = params.page || 1; 
      _.each(data.ResultObject, function (item) { item.id = item.K_CONTACT; }); 

      return { 
       results: data.ResultObject, 
       pagination: { 
        more: (params.page * 30) < data.total_count 
       } 
      }; 
     }, 
     cache: true 
    }, 
    multiple: true, 
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
    minimumInputLength: 3, 
    tags: true, 
    templateResult: self.Select2FormatData, // omitted for brevity, see the source of this page 
    templateSelection: self.Select2FormatDataSelection // omitted for brevity, see the source of this page 
});

來源

2016-07-01 10:48:53

Select2 4.0.0不能選擇結果

回答

相關問題