與jQuery X-Editable庫一起使用時，修改Select2下拉列表選擇的輸出

Question

我一直試圖使用X-Editable http://vitalets.github.io/x-editable/與Select2 https://select2.github.io/連續幾周沒有太多運氣。

最初我試圖從AJAX請求中加載數據，然后使用該庫，但是我可以看到所有舊代碼是否適用於兩個庫的舊版本。

為了略微簡化，我現在決定分別加載我的數據，以便X-Editable和Select2只需要處理已經可用的數據數組。

我現在的問題是修改數據的顯示。

默認情況下，我很滿意編輯字段的外觀，看起來像是“標簽”被選中。

編輯完成后，在初始頁面加載時，它會將我選擇的項目顯示為逗號分隔的字符串。 我想修改那個部分看起來不一樣。

我看到了一些按照我的要求工作的示例，但它們似乎不適用於較新的版本。

這里的JSFiddle http://jsfiddle.net/jasondavis/j72k110m/顯示了我想要的輸出和功能...差不多但是這個演示的問題是使用舊版本的Select2庫。 它有Select2版本v3.4.4和X-Editable版本v1.5.1

最新版本的Select2是版本v4.0.0 X-Editable是最新的v1.5.1，因為它有一段時間沒有更新。

---

在初始加載和選擇新值之后，它應該如下所示，這意味着它將我們選擇的值包裝在一個span ：

---

單擊以編輯選定的值時，它應該看起來像“標簽”，但它不應顯示<span>部分！

---

在這個JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
我已經將Select2更新為新版本，我試圖通過將所選值顯示為“標簽”來復制上面其他JSFiddle的功能。

此版本的另一個問題是，在選擇值時，它不會從下拉列表中刪除選項。 因此，即使已經選擇了1個項目，它仍會顯示為再次單擊的選項！

另一個問題是新選擇的項目不會添加到非編輯屏幕上。

下面的更多圖片顯示我的意思...

下圖顯示了初始屏幕加載了所選項目以及選擇但未處於編輯模式的項目。 問題是它沒有使用所選的新項目進行更新。 它還顯示所選的ID而不是標題/名稱

我的最終目標是在我的X-editable字段上使用Select2以允許選擇已分配的用戶。 選定的指定用戶將顯示一個重力圖像縮略圖圖像和用戶名。

Select2和X-Editable都允許使用模板樣式輸出來修改輸出，但是當它們一起工作時，默認功能不同，那些輸出修改功能與它們在其上運行任何庫時的工作方式不同;自己的。

我知道我想要的是可以完成的，因為2個庫可以協同工作，只需要讓較新版本的Select2與舊版本的X-Editable一起工作，這在很長一段時間內都沒有得到更新！

Answer 1

我正在測試的最終jsfiddles是https://jsfiddle.net/N6bQE/329/（bootstrap-editable ）和https://jsfiddle.net/N6bQE/331/（poshytip-editable ）。

以下是我在嘗試使用X-Editable使Select2 4.0.0工作時所做的一些觀察。

1. 您將data-value設置為apples, oranges, pie （注意空格），這在技術上是不正確的。 ids應該完全匹配，但由於 一個不幸的錯誤 舊版本的Select2中的一個功能 ，完全忽略了額外的空格。

   刪除空格解決了主要問題，即Select2無法正確匹配選項（因此不顯示它們）。

2. 您的source不包含您通過data-value傳遞的任何 data-value ，因此Select2無法顯示它們。 通過將某些id屬性向上排列，Select2距離顯示彈出窗口時顯示所選值的距離更近了一步。

3. 你正在使用X-Editable不允許的tags和source 。 該插件似乎優先考慮source tags ，因此實際上沒有任何內容傳遞到Select2，並且您的source完全被忽略。

4. 但這並不重要，因為X-Editable首先沒有正確顯示值。 您會注意到data-value顯示為單個標記，而不是分割並顯示為多個標記。 為了讓X-Editable與之合作，您需要在Select2選項中設置separator: ',' 。 雖然Select2不再支持此選項，但X-Editable完全忽略了viewseparator選項以支持此選項。

5. 為了在編輯標簽后讓標簽更新，您需要檢查display方法中的value是否為數組。 這是因為X-Editable只是將字符串傳遞回display方法，而不是人們期望的數組。