修改与 jQuery X-Editable 库一起使用时 Select2 下拉选择的输出
Modify the output of the Select2 dropdown selection when used with jQuery X-Editable library
我已经尝试使用 X-Editable http://vitalets.github.io/x-editable/ with Select2 https://select2.github.io/ 好几个星期了，但运气不佳。
最初我试图从 AJAX 请求中加载数据，然后使用该库，但我只能看到旧代码是否可以与两个库的旧版本一起使用。
为了稍微简化一些事情，我现在决定单独加载我的数据，这样 X-Editable 和 Select2 只需处理一组已经可用的数据。
我现在的问题是修改数据的显示。
默认情况下，我对编辑字段的外观感到满意，看起来像 "tags" 被选中。
编辑完成并在初始页面加载时，它会将我选择的项目显示为逗号分隔的字符串。我想修改那部分以使其看起来不同。
我看到一些示例可以按我想要的方式运行，但它们似乎不适用于较新的版本。
这里的 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:
单击以编辑所选值时，它应该看起来像 "tags" 但是它不应该显示 <span> 部分！
在这个 JSFiddle 中 http://jsfiddle.net/jasondavis/N6bQE/320/
我已将 Select2 更新到新版本，我正在尝试通过将所选值显示为 "tags" 来复制上面其他 JSFiddle 的功能。
此版本的另一个问题是，在选择值时，它不会从下拉列表中删除选项。因此，即使已经选择了 1 个项目，它仍然会显示为再次单击的选项！
另一个问题是新选择的项目不会添加到非编辑屏幕上。
下面有更多图片来说明我的意思...
下图显示了初始屏幕加载选定项目以及已选定但未处于编辑模式的项目。问题是它没有更新所选的新项目。它还显示选定的 ID 而不是 title/name
我的最终目标是简单地在我的 X 可编辑字段上使用 Select2 以允许选择分配的用户。选定的已分配用户将显示头像缩略图和用户名。
Select2 和 X-Editable 都允许使用模板样式输出来修改输出，但是当它们一起工作时，默认功能不同，并且这些输出修改功能的工作方式与 运行 上面有一个库；是自己的。
我知道我想做什么，因为这两个库是一起工作的，这只是让新版本的 Select2 与旧版本的 X-Editable 一起工作的问题好久不见！
我测试的最终 jsfiddles 位于 https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) and https://jsfiddle.net/N6bQE/331/（poshytip-editable）。
以下是我在尝试使 Select2 4.0.0 与 X-Editable 一起工作时所做的一些观察。
您将 data-value 设置为 apples, oranges, pie（注意空格），技术上 不正确。这些 ID 应该完全匹配，但是由于 一个不幸的错误 旧版本 Select2 中的一个功能，多余的空格被完全忽略了。
删除空格解决了主要问题，即 Select2 没有正确匹配选项（因此不显示它们）。
您的 source 不包含您通过 data-value 传递的 任何 个值，因此 Select2 无法显示它们。通过排列一些 id 属性，Select2 更接近于在显示弹出窗口时显示所选值。
您同时使用了 tags 和 source，X-Editable 不允许这样做。该插件似乎优先 tags 而不是 source，因此实际上没有任何内容传递到 Select2 并且您的 source 被完全忽略。
但这并不重要，因为 X-Editable 一开始就没有正确显示值。您会注意到 data-value 显示为单个标记，而不是拆分并显示为多个标记。为了让 X-Editable 与之配合，您需要在 Select2 选项中设置 separator: ','。虽然 Select2 不再支持此选项，但 X-Editable 完全忽略 viewseparator 选项以支持此选项。
为了让标签在编辑后更新，您需要检查display中是否有value method 是否为数组。这是因为 X-Editable 只是将一个字符串传回 display 方法，而不是人们期望的数组。
我已经尝试使用 X-Editable http://vitalets.github.io/x-editable/ with Select2 https://select2.github.io/ 好几个星期了，但运气不佳。
最初我试图从 AJAX 请求中加载数据，然后使用该库，但我只能看到旧代码是否可以与两个库的旧版本一起使用。
为了稍微简化一些事情，我现在决定单独加载我的数据，这样 X-Editable 和 Select2 只需处理一组已经可用的数据。
我现在的问题是修改数据的显示。
默认情况下，我对编辑字段的外观感到满意，看起来像 "tags" 被选中。
编辑完成并在初始页面加载时，它会将我选择的项目显示为逗号分隔的字符串。我想修改那部分以使其看起来不同。
我看到一些示例可以按我想要的方式运行，但它们似乎不适用于较新的版本。
这里的 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:
单击以编辑所选值时，它应该看起来像 "tags" 但是它不应该显示 <span> 部分！
在这个 JSFiddle 中 http://jsfiddle.net/jasondavis/N6bQE/320/
我已将 Select2 更新到新版本，我正在尝试通过将所选值显示为 "tags" 来复制上面其他 JSFiddle 的功能。
此版本的另一个问题是，在选择值时，它不会从下拉列表中删除选项。因此，即使已经选择了 1 个项目，它仍然会显示为再次单击的选项！
另一个问题是新选择的项目不会添加到非编辑屏幕上。
下面有更多图片来说明我的意思...
下图显示了初始屏幕加载选定项目以及已选定但未处于编辑模式的项目。问题是它没有更新所选的新项目。它还显示选定的 ID 而不是 title/name
我的最终目标是简单地在我的 X 可编辑字段上使用 Select2 以允许选择分配的用户。选定的已分配用户将显示头像缩略图和用户名。
Select2 和 X-Editable 都允许使用模板样式输出来修改输出，但是当它们一起工作时，默认功能不同，并且这些输出修改功能的工作方式与 运行 上面有一个库；是自己的。
我知道我想做什么，因为这两个库是一起工作的，这只是让新版本的 Select2 与旧版本的 X-Editable 一起工作的问题好久不见！
我测试的最终 jsfiddles 位于 https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) and https://jsfiddle.net/N6bQE/331/（poshytip-editable）。
以下是我在尝试使 Select2 4.0.0 与 X-Editable 一起工作时所做的一些观察。
您将
data-value设置为apples, oranges, pie（注意空格），技术上 不正确。这些 ID 应该完全匹配，但是由于一个不幸的错误旧版本 Select2 中的一个功能，多余的空格被完全忽略了。删除空格解决了主要问题，即 Select2 没有正确匹配选项（因此不显示它们）。
您的
source不包含您通过data-value传递的 任何 个值，因此 Select2 无法显示它们。通过排列一些id属性，Select2 更接近于在显示弹出窗口时显示所选值。您同时使用了
tags和source，X-Editable 不允许这样做。该插件似乎优先tags而不是source，因此实际上没有任何内容传递到 Select2 并且您的source被完全忽略。但这并不重要，因为 X-Editable 一开始就没有正确显示值。您会注意到
data-value显示为单个标记，而不是拆分并显示为多个标记。为了让 X-Editable 与之配合，您需要在 Select2 选项中设置separator: ','。虽然 Select2 不再支持此选项，但 X-Editable 完全忽略viewseparator选项以支持此选项。为了让标签在编辑后更新，您需要检查
display中是否有valuemethod 是否为数组。这是因为 X-Editable 只是将一个字符串传回display方法，而不是人们期望的数组。