select2 is a powerful drop-down library for jQuery with many features. It supports remote data source via ajax
property.
All parameters in ajax
 property of select2 will be directly passed to jQuery’s $.ajax
 function.
To use the following codes, you need to include select2 and jQuery first.
The server-side file which receives AJAX request needs to response with an array of objects. Here is an example
[{'id': 1, 'username': 'mark'}, {'id': 2, 'username': 'john'}]
HTML
<select name="filter" id="filter" class="select2" multiple="multiple" > </select>
Script
$('.select2').select2({ placeholder: ' Users', ajax: { url: [AJAX_URL], dataType: 'json', type: 'GET', data: function (term) { return { term: term }; }, processResults: function (data) { return { results: $.map(data, function (item) { return { text: item.username, id: item.username } }) }; } } });