Select2 loading ajax data

Select2 loading ajax data

Select2 allows you to use a customizable select box with support for searching, tagging, remote data sets and many other options.

Remote data support
Using AJAX you can efficiently search large lists of items.
Support
Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.

Now, how do you use select2 in your end.
Getting started
1.In order to use Select2, you must include the JavaScript and CSS file on your website. You can get these files from below locations.
css: select2.min.css
js: select2.min.js

Or, you can directly include the following lines of code in the section of your HTML.

2.Initialize Select2 on the select element that you want to make awesome.

Downloading the code locally
Include the following lines of code in the section of your HTML.

loading ajax/remote data
Select2 comes with AJAX support built in, using jQuery’s AJAX methods. In this example, I will show you how to search json data items.

When using Select2 with ajax data, the HTML required for the select is the same as any other Select2. If you need to provide default selections, you just need to include an option for each selection that contains the value and text that should be displayed.

You can configure how Select2 searches for remote data using the ajax option.

Select2 will pass any options in the ajax object to jQuery’s $.ajax function, or the transport function you specify.
Select2 is not sorting by the text; It displays the options in the order they appear in the HTML. using the above method you can make your own order.

If you have any query or facing any problem to configure Select2, please contact me.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *