Change the output from the Select2 drop-down list when used with jQuery X-Editable library

Question

I am trying to use X-Editable http://vitalets.imtqy.com/x-editable/ with Select2 https://select2.imtqy.com/ already without much cost.

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

To simplify everything a little, I now decided to upload it separately in my data, so that X-Editable and Select2 deal with the array of existing data.

Now my problem is changing the display of the data.

By default, I am pleased with the look of the edit box, which looks like "tags."

When editing is complete and upon the initial loading of the page, it displays my selected items as a comma separated line. I would like to change this part to look different.

I saw several examples that worked the way I want, but they don't seem to work with newer versions.

This JSFiddle here http://jsfiddle.net/jasondavis/j72k110m/ shows my desired result and functionality ... almost, but the trick is this demo uses 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 - version v4.0.0 X-Editable is updated to version 1.5.1, because it does not update after some time.

---

At boot time and after selecting a new value, it should look like the one shown below, which means that it completes our selected value in the span :

---

When you click to edit the selected values, it should look like it's “tags”, however it should not show the <span> !

---

In this JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
I upgraded Select2 to the new version, and I'm trying to replicate functions from another JSFiddle above, showing the selected values ​​as "tags".

Another problem with this version is that when choosing values, it does not remove the parameter from the drop-down list. Therefore, although 1 item has already been selected, it is still displayed as an option to click again!

Another problem is that the newly selected items are not added to the screen without editing.

Additional images below to show what I mean ...

The figure below shows the main screen loading options, as well as the items that are selected, rather than in edit mode. The problem is that it does not update with the new items selected. It also displays the selected identifier instead of the name / name

My ultimate goal is to simply use Select2 in my X-editable field to allow the selection of the assigned user. Selected designated users will show a miniature gravitator image and username.

Both Select2 and X-Editable allow you to use template style output to change the output, however, when they work together, the default functions are different from each other, and these change output functions do not work the same as using any library on it.

I know what I want, because the two libraries are designed to work together, it's just a matter of how to use the newer versions of Select2 for the older version of X-Editable, which has not been updated for a long time sadly!

Answer 1

The final jsfiddles I tested are on https://jsfiddle.net/N6bQE/329/ (boot file) and https://jsfiddle.net/N6bQE/331/ (poshytip-editable).

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

• You set data-value to apples, oranges, pie (note the spaces), which is technically wrong. IDs must match exactly, but because failed error function in older versions of Select2, extra spaces were completely ignored.

  Removing spaces solves the main problem that was correctly selected in Select2 (and as a result does not display them).

• Your source did not contain any values ​​that you passed through the data-value , so Select2 did not display them. By putting some of the id attributes up, Select2 is one step closer to displaying the selected values ​​when displaying a popover.

• You used both tags and source , which X-Editable does not allow. The plugin apparently prioritized tags over source , so nothing was actually passed to Select2, and your source was completely ignored.

• But that doesn't really matter, because X-Editable doesn't display the values ​​correctly in the first place. You will notice that data-value displayed as a single tag instead of being split and displayed as multiple tags. In order for X-Editable to work with this, you need to set separator: ',' in your Select2 options. Although this option is no longer supported for Select2, X-Editable completely ignores the viewseparator parameter in favor of this.

• To update tags after editing them, you need to check whether the value in the display method is an array or not. This is because X-Editable simply returns the string to the display method, and not to the array you would expect.