Jquery SELECT2 v3 Ajax/PHP Tutorial

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.

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 :

	 	
Option Value :	 
	 

Should produce similar to this :

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 :

$(document).ready(function(){
   $('#selectbox-o').select2({
    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 :

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.