Jquery Select2 v4 Ajax PHP Tutorial

laptop on a desk, with a notepad and pen

Since my last tutorial on the Select2 Jquery  plugin using remote data loaded using Ajax and PHP has been so successful, I am updating the tutorial to work with the newer Version 4 plugin.

If you don’t know what the Select2 plugin is : Its a Jquery plugin to turn an input/select field into a dropdown select box with searchable and stylable features.

Head over to https://select2.github.io/ to find out more.

So continuing their excellent plugin they have now improved and upgraded the plugin to Version 4. And although the documentation has improved, it still is quite hard to understand the concept of Ajax remote data pulled from a MySQL database into the plugin.

As my last tutorial on V3 of the plugin has been so helpful to many people and I have been asked about Version 4. I am going to show you how to use the plugin with a small PHP script to pull remote data from the database.

If you would prefer to use the Version 3 of this plugin you can view my tutorial here : jquery-select2-ajax-tutorial

Initial Instructions

Firstly, if you haven’t already downloaded the plugin go on over to their website or onto Github and grab a copy of the plugin.

For this tutorial you will need the CSS files and JS files located within the dist folder.

Within your head area make sure you include the location to the .css file.

And within the footer ensure you have loaded jquery and then the select 2 plugin.

So that the basics loaded into the page.

Now for the HTML Instructions

** The old version used to convert a hidden Input field into a select2 dropdown. **

So you add a Select box to your HTML form:

Product Name

And a little bit of Jquery

$( ".productName" ).select2({

ajax: {

url: "/ajax/productsList.php",

dataType: 'json',

delay: 250,

data: function (params) {

return {

q: params.term // search term



processResults: function (data) {

// parse the results into the format expected by Select2.

// since we are using custom formatting functions we do not need to

// alter the remote JSON data

return {

results: data



cache: true


minimumInputLength: 2


So after the input length has reached 2 characters it uses ajax to load the results from our page set in the URL element.
It is going to send the Search String through to the php as $_GET in the field name of : q.
So our ajax request will go : /ajax/productsList.php?q=

Now some PHP Instructions

We will use a small php script to connect to a MySQL Database and search for a matching field.
I always use PDO with MySQL and prepared statements. This should prevent any chance of MySQL Injection which older MySQL queries did not protect against Out of the box.
If you are unsure how to connect to a Database there are plenty of Tutorials on the web on how to do this.

If you view the remote data load on the Plugin page you see the results can be translated in many ways and styled in an image/list results.
Please read the documentation there to learn how to do this.

Hopefully this has helped you if you have upgraded from version 3 to version 4 of the Jquery Select2 plugin.