javascript - 修改与 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 的最新版本是v4.0.0 版 X-Editable 是最新的 v1.5.1，因为它已经有一段时间没有更新了。

---

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

---

单击以编辑所选值时，它应该看起来像“标签”，但它不应该显示 <span>部分!

---

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

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

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

下面的更多图片可以说明我的意思...

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

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

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

我知道我想做什么，因为这两个库是要一起工作的，这只是让新版本的 Select2 与旧版本的 X-Editable 一起工作的问题，它已经很长时间没有更新了时间可悲!

Answer 1

我测试的最终 jsfiddles 位于 https://jsfiddle.net/N6bQE/329/ ( Bootstrap 可编辑)和 https://jsfiddle.net/N6bQE/331/ (poshytip 可编辑)。

以下是我在尝试使 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 方法，而不是人们期望的数组。