与 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 version v3.4.4和X-Editable version v1.5.1

Select2的最新版本是version v4.0.0 X-Editable 在 v1.5.1 是最新的，因为它已经有一段时间没有更新了。

---

在初始加载和选择新值后，它应该如下所示，这意味着它将我们选择的值包装在 span 中：

---

当点击编辑选定的值时，它应该看起来像“标签”，但它不应该显示<span> 部分！

---

在这个 JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
我已将 Select2 更新到新版本，并且我试图通过将所选值显示为“标签”来复制上面其他 JSFiddle 的功能。

此版本的另一个问题是，在选择值时，它不会从下拉列表中删除选项。因此，即使已经选择了 1 个项目，它仍然显示为再次单击的选项！

另一个问题是新选择的项目不会添加到非编辑屏幕上。

下面有更多图片来说明我的意思......

下图显示了初始屏幕加载所选项目以及已选择且未处于编辑模式的项目。问题是它没有使用选定的新项目进行更新。它还显示所选 ID 而不是标题/名称

我的最终目标是在我的 X 可编辑字段上简单地使用 Select2 以允许选择分配的用户。选定的已分配用户将显示 gravatar 缩略图和用户名。

Select2 和 X-Editable 都允许使用模板样式的输出来修改那里的输出，但是当它们一起工作时，默认功能是不同的，并且这些输出修改功能与运行任一库时的工作方式不同靠它自己。

我知道我想要什么，因为这 2 个库旨在协同工作，只是让 Select2 的新版本与长期未更新的旧版本 X-Editable 一起工作的问题时间可悲！

Answer 1

我测试的最后一个 jsfiddles 位于 https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) 和 https://jsfiddle.net/N6bQE/331/ (poshytip-editable)。

以下是我在尝试使 Select2 4.0.0 与 X-Editable 一起工作时所做的一些观察。

1. 您将 data-value 设置为 apples, oranges, pie（注意空格），技术上不正确。 id 应该完全匹配，但是由于旧版本 Select2 中的一个不幸的错误 一个特性，额外的空格被完全忽略了。

   删除空格解决了主要问题，即 Select2 未正确匹配选项（因此未显示它们）。

2. 您的source 不包含任何您通过data-value 传递的值，因此 Select2 无法显示它们。通过排列一些id 属性，Select2 离显示弹出框时显示所选值更近了一步。

3. 您同时使用了 tags 和 source，这是 X-Editable 不允许的。该插件似乎将tags 优先于source，因此实际上没有任何内容传递到Select2 并且您的source 被完全忽略了。

4. 但这并不重要，因为 X-Editable 一开始就没有正确显示这些值。您会注意到data-value 被显示为单个标签，而不是被拆分并显示为多个标签。为了让 X-Editable 与之配合，您需要在 Select2 选项中设置separator: ','。虽然 Select2 不再支持此选项，但 X-Editable 完全忽略了 viewseparator 选项，转而支持此选项。

5. 为了让标签在编辑后更新，您需要检查display 方法中的value 是否为数组。这是因为 X-Editable 只是将一个字符串传回给 display 方法，而不是人们期望的数组。