Ajax autocomplete using PHP & MySQL

July 15, 2009

Today I have decided to implement an Ajax (jQuery) auto complete feature in PHP & MySql. jQuery makes remote scripting a piece of cake and that led me to spend more time coding additional functionalities for the auto-complete field. In this post, I’ll explain how to use my autocomplete field and in a following post I’ll explain all the code. So let’s start!

Before continuing let’s see My Demo to how it will work.

Demo | Download

Besides the auto-complete code we need the jQuery library along with its Dimensions plug-in (all files are included in the zip files). Let’s include in the head of your page:

Now we need to call the function that will bring data to our auto-complete field – setAutoComplete.

The call to setAutoComplete is inside a jQuery special code that is only executed when the DOM is ready, or in other words, when all the code is already loaded. The setAutoComplete function takes 3 parameters:

  • the id of the input field
  • the id of the div that will hold the returned data
  • the URL of the remote script that will process the request

Be aware that the URL should reflect your remote script and that it will be combined with the text typed in the input field.

Now we include our stylesheet to define the look of the elements. We  need to define the styles of the div that will contain the results,  they include two classes for the selected and unselected items. Take a  look at the CSS file linked at the end of this post. There is also a  style for the input field.

To finish the client side part now we need to define the code of the input field as follows:

Now that the client side is finished it’s time for  the server script. Here is an example of a script that try to match  colors. I’m using PHP but you can use whatever language you prefer for  the job, of course. You just need to return the results as an array  encoded as JSON.

Now every things done! As said before, we return the data as an array encoded as JSON. If you are running PHP >= 5.2.0 or the json extension you simply use json_encode for the job.

You should have a working auto-complete field by now! Note that we don’t need to explicit create the result div because it’ll be created automatically.

Post a Comment

Your email address will not be published. Required fields are marked *


  • Recent Posts

    • Secure Your CodeIgniter Application using CSRF Token

      by admin
      In this tutorial, we will learn how to make our website more secure & protect from CSRF when we are using CodeIgniter web application framework. We thanks CodeIgniter team who giving in built support Cross Site Rquest Forgery (CSRF or XSRF). To enable CSRF protection CodeIgniter Framework will automatically protect forms or AJAX calls from CSRF when […]
    • Multiple Themes in CodeIgniter like WordPress

      by admin
      Create multiple themes and select one of them from backend like wordpress is drawbacks of a framework. Similar CodeIgniter have not an option to select one theme from multiple theme concept but we can re arrange using CodeIgniter template concept. We are going to handle multiple themes in a very simple way, in this example […]
    • How to create REST API in PHP?

      by admin
      REST (Representational State Transfer) is the standard design architecture for developing web services API. It is simple easy to understand and developing client-server relationship API. REST takes advantage of the HTTP request methods to layer itself into the existing HTTP architecture. We can handle GET, PUT, POST, DELETE operations through it. A REST API allows […]
    • Basic security vulnerabilities in php code

      by admin
      Today I have informed PHP programmers of common security mistakes that can be overlooked in PHP scripts. In the beginning programmers fail to understand about the PHP security issues or how to make secure script. The wise programmer knows that the real question is how secure a site is. Here I have focus how to […]
    • Generating CAPTCHA Image Using PHP

      by admin
      The CAPTCHA is a very very useful test to prevent abuse on the websites. When you create a web form like registration, login, contact us, blog comment etc…, We are suffering day by day with unwanted email or web spam abuse. So if you use CAPTCHA on your website forms, this can help in stopping […]
Copyright © 2012-2013 Sujit Shah. .
Tags: PHP Programmer Nepal, Web Developer Nepal, Website Designer, CodeIgniter Developer, Yii Framework, Wordpres, OpenCart, Drupal, Front End Developer, Responsive Developer, Bootstrap, Foundation, Freelance PHP MySql Programmer Nepal, Expert Programmer Nepal, PHP, MySql, LAMP, Linux, Apache, SVN, JavaScript, Ajax, jQuery, HTML, HTML5, CSS, CSS3, XML, SOAP, PSD to XHTML, Responsive Web Design, Web Development, CMS, E-commerce, Classified, Job portal, Travel & tours, Penny Auction, Lowest Unique Bid Auction, Reverse Auction, Price Reveal Auction, Payment Gateway Integration, Nepal, India, Hong Kong, Australia, UK, USA, Singapore, Germany, Canada, Netherlands, New Zealand, Norway, Italy