Using Select 2 With AJAX

Select 2 can be used together with ajax to asynchronously and dynamically populate search results based on search queries entered.

To begin, the select2 css and js must be loaded into the project:

<link rel="stylesheet" href="~/Content/select2.min.css">

<script src="~/Scripts/select2.min.js"></script>

It is good practice to download the files and include an offline path so that if the path is moved, the system still works.

As detailed in the official select2 documentation, the select2 function must be called/initialised on a select element.

Select element:

<select class="test-select">/select>

Select 2 initialisation:

$('.test-select').select2({
    minimumInputLength: 1,
})

The minimum input length specifies the minimum characters needing to be entered by the user to start returning results.

Within this select 2 initialisation, an ajax call can be run which will communicate with server side code to return the search results.

This server side logic can be written in any language of your choosing.

This server side logic must expect 3 parameters of data type string. Term, q, and _type. (unless using pagination).

These parameters are explained in the official select 2 documentation:

Either the ‘q’ or ‘term’ parameters can be used within a server side query to return the content. The data returned to the ajax call must be in a JSON object in this format:

{
	{
		“id”:1
		“text”:”option 1”
	},
	{
		“id”:2
		“text”:”option 2”
	}
} 

ID represents the value attribute of the dynamically created option and text represents the text body of the option.

The select 2 initialisation code can then be expanded to include the ajax call as follows:

$('.test-select').select2({
    minimumInputLength: 1,
    ajax: {
        url: '/Customers/GetCustomersFromQuery',
        dataType: 'json',
        processResults: function (data) {
            return {
                results: data.data
            };
        }
    },
})

The process results function specifies where inside the data object, returned by ajax, the list of results is contained within. This can be excluded, providing the results content is not within a child of the data object.

By default, select 2 returns the text ‘no results found’ when the search query returns no matching results.

The following code can be added to replace this default text:

$('.test-select').select2({
    minimumInputLength…
    language: {
        noResults: function () {
            var searchContent = $('.test-select').data('select2').$dropdown.find("input").val();
            return "No customer's with name '" + searchContent+"' found.";
        }
    },
    ajax…
})

The searchContent variable is sometimes useful to be used within the no results text but is completely optional.

To populate the default text within the select element, either an option can be included within the select element, or a placeholder can be added to the select 2 initialisation:

<select class="test-select">
    <option>Select a customer</option>
</select>

or

$('.test-select').select2({
    minimumInputLength…
    placeholder:'Select a customer',
    ajax…
})

If you have found this useful please leave a comment.

Icons made by Freepik from www.flaticon.com