Setting preselected values in select2 v4.0 (with ajax+html in options)

[vgu...@gmail.com]

Hi all,

I have quite simple function that selects subway stations (it shows color of metro line and station name, i.e. options contain html):

function applyMetroSelect2(selectFieldId) {
$('#'+selectFieldId).select2({
placeholder: 'Station not selected',
searchInputPlaceholder: 'Please, select station',
maximumSelectionLength: 1,
minimumInputLength: 1,
allowClear: true,
ajax: {
url: 'http://trudomir.ru/ajax/metro/getStations/',
method: 'GET',
dataType: 'json',
quietMillis: 500,
data: function(params) {
return {
city_id: $('#city-id').val(),
name: params.term,
limit: 10
}
},
processResults: function(data) {
data = data.results;
$.each(data, function(index, value) {
value.id = value.metro_station_id;
value.text = value.name;
});
return {
results: data
};
},
cache: true
},
templateResult: function(data) {
if (data.color === undefined) return data.name;
return '<span style="color:#'+data.color+'"><i class="fa fa-circle"></i></span> '+data.name;
},
templateSelection: function(data) {
if (data.color === undefined) return data.name;
return '<span style="color:#'+data.color+'"><i class="fa fa-circle"></i></span> '+data.name;
},
escapeMarkup: function(m) {return m;}
});
}

It works fine, but I cannot find any way how to initialize the select2 field with option containing html because initSelection is not available in v4.0.
I see that you're proposing to use DataAdapters, but I couldn't find any working example how to do this. And yes, I know about this page https://select2.github.io/announcements-4.0.html, but it is absolutely unclear what does it mean!

Please, could you guide me how to change this sample, so that I could specify preselected items? I've spent the whole day googling the solution and still have no idea how to fix it...

[vgu...@gmail.com]

Guys, any ideas how to do this? This is a real show-stopper for select2!
I'll have to switch to other implementations of drop-down lists if I don't find the solution in the nearest couple of days. It is really annoying that initSelection was removed in v4.0 and no working samples provided for the alternative... :(

[Kevin Brown]

These three Stack Overflow questions might help you out

Select2 4.0.0 initial value with Ajax

Select2 4.0 initial value in ajax mode

Preselected value for select2 tag selectBox

I should mention that while `initSelection` was deprecated in 4.0.0, it will still work in full builds of Select2. If you provided your `initSelection`, we might even be able to help you convert it over to work in Select2 4.0.0.

Kevin Brown

On Tue, Jun 9, 2015 at 7:00 PM <vgu...@gmail.com> wrote:

Guys, any ideas how to do this? This is a real show-stopper for select2!
I'll have to switch to other implementations of drop-down lists if I don't find the solution in the nearest couple of days. It is really annoying that initSelection was removed in v4.0 and no working samples provided for the alternative... :(

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at http://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

[vgu...@gmail.com]

Hi Kevin!
Thanks for your reply!
I've just tried including full build of select2. The problem is that select2 displays blank option when loading page.
See test sample here: http://trudomir.ru/test-select2.html

[Kevin Brown]

Right now you have a few issues.

- You're hiding the remove button for individual options. While this isn't necessarily an issue you need to fix, you would have realized the next few issues by hovering over it.

- Your templating method is not set up to work for the default `text` property. This property is where the text of pre-selected options is put, and it is a required property. It pre-fills the `title` and other areas, which are required for accessibility, and also is used in the standard messages.

- You are including HTML in-line in your `<option>` tag. This is not valid markup, and all of the extra HTML is being stripped out by the browser and only the text is left. You can confirm this by hovering over the remove icon, which will only display the raw text from the end of the option.

The `initSelection` method that you use probably isn't needed if you properly handle the `text` property, but otherwise you are going to need to use it to convert the pre-formatted text into your `name` and `color` properties.

Kevin Brown

[vgu...@gmail.com]

> - You're hiding the remove button for individual options. While this isn't necessarily an issue you need to fix, you would have realized the next few issues by hovering over it.

This is made on purpose and it is the requirement of the customer. He wants typing, searching and displaying of option in the same input. Remove button is displayed at the right of the input box.

> - Your templating method is not set up to work for the default `text` property. This property is where the text of pre-selected options is put, and it is a required property. It pre-fills the `title` and other areas, which are required for accessibility, and also is used in the standard messages.
> - You are including HTML in-line in your `<option>` tag. This is not valid markup, and all of the extra HTML is being stripped out by the browser and only the text is left. You can confirm this by hovering over the remove icon, which will only display the raw text from the end of the option.

Do I understand you correctly that you are proposing instead of:

<select id="metro1"><option value="706" selected="selected"><span style="color:#ffcb31"><i class="fa fa-circle"></i></span> Station #1</span></select>

do something like:

<select id="metro1"><option value="706" selected="selected">#ffcb31|Station #1</select>

and then define templateSelection method as:

templateSelection: function(data) {
if (data.color === undefined) {
var tokens = data.text.split('|');
return '<span style="color:#'+tokens[0]+'"><i class="fa fa-circle"></i></span> '+tokens[1];

}
return '<span style="color:#'+data.color+'"><i class="fa fa-circle"></i></span> '+data.name;
}

Although it does work, but in that case if you mouseover the selected option it will display "#ffcb31|Station #1" as a title. Not really user-friendly...
Is there any way to change the title in that case?

[pieterjan...@msn.com]

Two and a half years later there's still no working example of select2 with ajax and initially set values to be seen anywhere on the internet...

What?

[rich...@gmail.com]

On Friday, November 3, 2017 at 7:53:22 AM UTC-7, pieterjan...@msn.com wrote:
> Two and a half years later there's still no working example of select2 with ajax and initially set values to be seen anywhere on the internet...
>
> What?

The select2 site has a description of how to do this.
https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2
I did this on my MVC application. User selects value in select2 and submits. on Reload the parameter value is passed back to the page. If the parameter has a value, then I call the functioned referenced to add it and trigger the select2 object.