Modify the output of the Select2 dropdown selection when used with jQuery X-Editable library

Question

I have been trying to use X-Editable http://vitalets.github.io/x-editable/ with Select2 https://select2.github.io/ for weeks now without much luck.

Originally I was trying to load in data from AJAX request and then use the library but all I could see if old code that supposedly worked with the older versions of both libraries.

To slightly simplify things I have now decided to load in my data separately so that X-Editable and Select2 only have to deal with an array of data that is already available.

My problem now is modifying the display of the data.

By default I am happy with the look of the edit field which looks like "tags" being selected.

When editing is completed and on initial page load, it shows my selected items as a comma separated string. I would like to modify that part to look different.

I saw some examples that worked as I want it to however they do not seem to work with the newer versions.

This JSFiddle here http://jsfiddle.net/jasondavis/j72k110m/ shows my desired output and functionality...almost but the catch is this demo is using older versions of the Select2 library. It has Select2 version v3.4.4 and X-Editable version v1.5.1

The latest version of Select2 is version v4.0.0 X-Editable is up to date at v1.5.1 as it has not been updated in a while.

---

On initial load and after selecting new value it should look like this below which means it wraps our selected value in a span:

---

When clicked to edit the selected values, it should look like this which looks like "tags" however it should not show the <span> part!

---

In this JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
I have updated Select2 to the new version and I am trying to replicate the functionality from the other JSFiddle above by showing the selected values as "tags".

Another issue with this version is that when selecting values, it does not remove an option from the dropdown list. So even though 1 item is selected already, it still shows up as an option to click on again!

The other issue is that new selected items do not get added on the non-edit screen.

More images below to show what I mean...

Image below shows the intial screen load selected items and also items that are selected and not in edit-mode. The issue is that it is not updating with new items that are selected. Also it shows the selected ID's instead of a title/name

My end goal is to simply use Select2 on my X-editable field to allow the selection of an Assigned User. Selected assigned users will show a gravatar thumbnail image and the user name.

Both Select2 and X-Editable allow the use of a template style output to modify there output however when they are working together, there default functionality is different and those output modification functions do not work the same as they do when running either library on it;s own.

I know what I want can be done since the 2 libraries are meant to work together, it's just a matter of getting the newer versions of Select2 to work with the older version of X-Editable which has not been updated in a long time sadly!

Answer 1

The final jsfiddles that I was testing on are at https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) and https://jsfiddle.net/N6bQE/331/ (poshytip-editable).

Here are some observations I made while trying to make Select2 4.0.0 work with X-Editable.

1. You were setting data-value to apples, oranges, pie (note the spaces), which is technically not correct. The ids are supposed to match up exactly, but due to an unfortunate mistake a feature in older versions of Select2, extra whitespace was completely ignored.

   Removing the spaces solves the main issue, which was Select2 not matching options correctly (and as a result not displaying them).

2. Your source did not contain any of the values you were passing in through data-value, so Select2 had no way of displaying them. By lining some of the id attributes up, Select2 was one step closer to displaying the selected values when the popover was displayed.

3. You were using both tags and source, which X-Editable does not allow. The plugin appeared to prioritize tags over source, so nothing was actually being passed into Select2 and your source was totally ignored.

4. But that doesn't matter too much, because X-Editable isn't displaying the values correctly in the first place. You'll notice that the data-value is being displayed as a single tag, instead of being split up and displayed as multiple tags. In order to get X-Editable to cooperate with this, you need to set separator: ',' in your Select2 options. While this option is no longer supported for Select2, X-Editable completely ignores the viewseparator option in favor of this one.

5. In order to get the tags to update after they are edited, you need to check if value in the display method is an array or not. This is because X-Editable just passes back a string to the display method, instead of the array that one would expect.