I am using Select2 plug-in extensively in one of the projects. Some of the Select2 controls get data via Ajax. I needed a way to retrieve remote data and give user an ability to select an option from the list of predefined suggestions. For example, imagine a dropdown control on a travel website where you could search for a destination and there is a list of 10 most popular destinations already in the list.
At first I thought I could just add <option>...</option> tag for each predefined suggestion. This would have been a very natural way to handle it. Unfortunately when Select2 control retrieves data remotely via Ajax, it ignores all option HTML tags except the placeholder <option></option> or options with selected attribute.
Unfortunately there is no built-in way to do it. I have found this issue on GitHub discussing the feature I needed. Gladly one of the commenters, Stanislav Govorov, has created a custom adapter that allowed to add predefined options to Select2 control.
There are couple minor issues with the adapter he created, so I forked it and made a few fixes/improvements to handle data format expected by Select2 control by default.
Examples
Show predefined options with no selected option
Show predefined options with selected option
Select2 control removes option with selected attribute from the list. The trick is to list the selected option twice, second time without selected attribute. This is counter-intuitive but this is how to do it with Select2 and Ajax-sourced data.
Thank you very much for this article! It saved A LOT of time. There was a little problem due to my environment (webpack) – importing that script via tag didn’t work so I imported it directly into my project and everything start to work (with micro adjustments).
Thank you, Nikita! Glad that it worked for you.
That does not address the intial issue, which is to allow a list of selected AND un-selected options the user can select from before using the AJAX search to find their selection.
Adapter does exactly that, it allows the list of selected AND not selected options that user can select before doing Ajax request. However Select2 control removes option with
selectedattribute from the list. I did some experimenting and the trick is to list the selected option twice, second time withoutselectedattribute, see this example. I agree, this is counter-intuitive but this is how to do it with Select2 and Ajax-sourced data.Thanks for your observation, I have updated the post with additional example.
Predefined is perfect but search is not working.
Thanks, it’s fixed now.
Thank you so much Michael. You saved my time. 🙂
Another vote of gratitude 🙂 Thanks, Michael.
Hi, nice post. Do you have some trick how to POST option value to data parameters of dataTables (serverside) without select2. The main issue is that the form on submit, still took only first option value and ignore other options in select element. Inputs have any issue with form submit
I am sorry but I have a hard time understanding what you’re trying to achieve. This post has nothing to do with DataTables. Do you have an example that demonstrates the problem and desired behavior?
Hi Michael, here is the
example http://live.datatables.net/vecateke/6/edit (look on console, network, requests (on change and submit)
the whole issue is described here https://datatables.net/forums/discussion/comment/191396
Do you think that is the issue of DataTables or is here elegant way how to send option value to parameter ?
I replied to you on the DataTables forum directly, please see this post.