Jquery SELECT2 v3 Ajax/PHP Tutorial

A little tutorial on the Select2 JQUERY Plugin with a BASIC AJAX response via a PHP script.
On a recent project I was looking for an autocomplete jquery plugin that acts like a select box. The reason i need it as a select box is to prevent incorrect data choice. At first i was running the great jquery-ui plugins and using the autocomplete via a text box and retrieving data via ajax and json.

However I soon discovered that my clients could type data in the textbox and if the answer was not on the autoselect it added the text they have typed. Now when trying to search through a database for results this caused me a bit of a headache.
So i plodded over to Google and looked for an alternative.

Updated April 2015
There is now a newer version of the Select 2 plugin available. This is V4 at present. They have altered the way the ajax works so this tutorial will not work with this version.
To view an updated tutorial for Select2 Version 4 click here.

I understand that the Jquery-UI version has a bind method for select but it just seemed a bit messy and the coding was not the easiest to follow.
Next i found a great plugin called chosen :
http://harvesthq.github.com/chosen/ and this was an excellent plugin.
The only problem i had was loading the data via ajax for a keypress. For my particular project I had 68000 titles in a database i needed to search. Now that makes for a large select option list.
So I plodded back onto Google and found a link via Stack-Exchange for a plugin called Select2.

So i thought i would give this a go… Only issue was the ajax example was not easy to follow as they have used an advanced options to retrieve data from rotten tomatoes.
But this was the plugin I wanted.
I found some help here : http://it.toolbox.com/blogs/rymoore/select2-jquery-select-boxes-54810
with the an easy ajax answer. I am writing this post to show you how to use php to send the json back to the ajax request.

Firstly the html required :


Should produce similar to this :
Select2 No Text

Notice that because I am using ajax to get the result the field has to be hidden.
The name is the used as usual to send the value through the form.
The data-placeholder appears as the select box placeholder.

Now I added the following jquery :

    minimumInputLength: 2,
    ajax: {
      url: "../datafeeds/optionlist.php",
      dataType: 'json',
      data: function (term, page) {
        return {
          q: term
      results: function (data, page) {
        return { results: data };

The option I have set is minimumInputLength: 2,
This means that the ajax will not get called until 2 characters have been entered into the search box.
After 2 characters have been entered it does an ajax onto optionlist.php (change to your php file).
Datatype is set to json as the data is sent back from php via json.
term is characters entered and q being the string that is sent to the script in the form of a GET.
The results are then returned to data.

So the php script (optionlist.php) is a mysql query on a database to get a json string back.
The select2 plugin looks for the ajax to appear as : [{“id”:”blah”,”text”:”blah text”},{“id”:”blah2″,”text”:”Blah2 text”}]
This will show the text in the select box and the value of the input will be the id..
so if it was enetered as a standard select box :

Blah Text

Blah2 Text

Now for the magical php script.
I am using pdo with a prepared statement for added security.
I am not going to show connection proccess.

The end result should look similar to this :
Select2 Dropdown

*** UPDATE ***
I have updated the syntax on this following the comment from Gustavo to avoid servers with error-reporting switched on all

How advanced you make the mysql query is entirely down to you. In my picture I join the mysql with a products database with a count to give me back the amount of items shown.

Please feel free to drop me a comment if you spot a mistake or you have any comments or suggestions.

Copyright 2007 - 2024 southcoastweb is a brand of DSM Design.