jQuery Autocomplete Search using PHP, MySQL and Ajax

Posted by & filed under Ajax, HTML5, JAVASCRIPT, JQUERY, MYSQL, PHP.

In this tutorial we are going to implement jQuery autocomplete search using PHP, MySQL and Ajax. This jQuery autocomplete gives suggestions when users starts to type on searchbox like in google search box. I had implemented two types of jQuery autocomplete

jquery autocomplete integration

1. Simple jQuery autocomplete

2. Populate multiple textbox with single jQuery autocomplete request.

please refer my latest tutorial on jQuery automplete

jQuery Autocomplete Mutiple Fields Using jQuery, Ajax, PHP and MySQL

Invoice System Using jQuery AutoComplete

For every letter user types something on textbox, ajax request will sent to the Apache server. There Apache server will commuincate with MySQL database and fetch some data’s based on the text users typed in the textbox. Finally Apache server sends the response to the ajax request sent by client, the response data will showed as suggestions to the users.

 

 

jquery-autocomplete-using-php-mysql-ajax

jQuery Autocomplete using PHP, MySQL and Ajax

Step 1:

Create following sample database and tables to implement this jQuery autocomplete functionality using following sql queries.

CREATE DATABASE IF NOT EXISTS `autocomplete` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `autocomplete`;
CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `iso` char(2) NOT NULL,
  `name` varchar(80) NOT NULL,
  `nicename` varchar(80) NOT NULL,
  `iso3` char(3) DEFAULT NULL,
  `numcode` smallint(6) DEFAULT NULL,
  `phonecode` int(5) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=240 ;
CREATE TABLE IF NOT EXISTS `names` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fruit` varchar(100) NOT NULL,
  `human` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=166 ;

Please download sql dump and source of this tutorial using blow Download link .

 

 

Step 2:

Create config.php file to have database connections in a separate file.

<?php
/*
Site : http:www.smarttutorials.net
Author :muni
*/
define('DB_HOST', 'localhost');
define('DB_NAME', 'autocomplete');
define('DB_USER','root');
define('DB_PASSWORD','');

$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
?>

Step 3:

Now create index.php file and create following textbox.

<input id="country_name" class="form-control txt-auto"/>

Step 4:

If you want to implement this autocomplete functionality minimum you need following jquery and css files.
(jquery.min.js, jquery.ui.min.js and jquery.ui.min.css). add following files in your index.php file.

<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>	
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>

Step 5:

This following jquery scripts will get whatever    user types in the textbox, and makes ajax request to the server with data, user entered in the textbox. Finally get the response from the server and shows as suggestions.

$('#country_name').autocomplete({
		      	source: function( request, response ) {
		      		$.ajax({
		      			url : 'ajax.php',
		      			dataType: "json",
						data: {
						   name_startsWith: request.term,
						   type: 'country'
						},
						 success: function( data ) {
							 response( $.map( data, function( item ) {
								return {
									label: item,
									value: item
								}
							}));
						}
		      		});
		      	},
		      	autoFocus: true,
		      	minLength: 0      	
		      });

Step 6:

create ajax.php file that will handle all ajax request from the client.

<?php
require_once 'config.php';

if($_GET['type'] == 'country'){
	$result = mysql_query("SELECT name FROM country where name LIKE '".strtoupper($_GET['name_startsWith'])."%'");	
	$data = array();
	while ($row = mysql_fetch_array($result)) {
		array_push($data, $row['name']);	
	}	
	echo json_encode($data);
}

?>

Please download source code(added all example code showed in the demo page)  of this tutorial using above download link..

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!