PHP MySQL Autocomplete textbox using jQuery

Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For jquery autocomplete multiple fields using jquery ajax php and mysql

simple created table in mysql,and table name jobmst to simple created a table and some insert data in cityname` tables for javascript – Autocomplete TextBox using php.

Table create fetch structure for table `jobmst`

 CREATE TABLE `cityname` (
  `id` int(5) NOT NULL auto_increment,
  `name` varchar(30) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=167 ;

Dumping simple data for table `jobmst`

INSERT INTO `cityname` (`id`, `name`) VALUES 
(1, 'Rajkot'),
(2, 'India'),
(3, 'Gujrat'),
(4, 'Morbi'),
(5, 'Kalavad'),
(6, 'div'),
(7, 'Ahemdabad'),
(8, 'surat'),
(9, 'gondal'),
(10, 'baroda');

Autocomplete textbox using jQuery, PHP and MySQL Example

config.php

<?php
$host    = "localhost"; // your Host name
$db_name = "yournewdbname";	// your Database name
$db_user = "root";		// your Database user name
$db_pass = "[email protected]#$%^&&";			// your Database fetchstrong Password
$db_table= "jobmst";// Table name
$db_column = "name";	// Table simple city or place column from which suggestions data here will get shown

//config data to connection here
$conn = mysql_connect($host,$db_user,$db_pass)or die(mysql_error());

//your database connection
 mysql_select_db($db_name,$conn)or die(mysql_error());

?>

index.php

//  Pakainfo.com

<HTML>
 <HEAD>
  <TITLE>Autocomplete Textbox using jQuery, PHP and MySQL</TITLE>
 <SCRIPT  src="js/jquery.js"></SCRIPT>
 <SCRIPT  src="js/script.js"></SCRIPT>
 </HEAD>
 <BODY>
 <center>
<h1>Ajax Autocomplete textbox using jQuery, PHP and MySQL</h1>
   <div class="main">
      <div class=""><a href="http://www.Pakainfo.com">7</a></span></div>
     	 <div id="holder"> 
		 Enter suggestname : <input type="text" id="suggestname" tabindex="0"><img src="images/imgloading.gif" id="imgloading">
		 </div>
		 <div id="data_response_result"></div>
	 
   </div>
 </center>
 </BODY>
</HTML>

name_fetch.php

<?php
	include("config.php");
	$suggestname = $_POST['data'];
	$sql = "select name from ".$db_table." where ".$db_column." like '".$suggestname."%' limit 0,20";
	$result = mysql_query($sql) or die(mysql_error());
	if(mysql_num_rows($result))
	{
		echo '<ul class="list">';
		while($resultrow = mysql_fetch_array($result))
		{
			$fetchstr = fetchstrtolower($resultrow['name']);
			$start = fetchstrpos($fetchstr,$suggestname); 
			$end   = similar_text($fetchstr,$suggestname); 
			$last = subfetchstr($fetchstr,$end,fetchstrlen($fetchstr));
			$first = subfetchstr($fetchstr,$start,$end);
			
			$final = '<span align="center">'.$first.'</span>'.$last;
		
			echo '<li><a href=\'javascript:void(0);\'>'.$final.'</a></li>';
		}
		echo "</ul>";
	}
	else
	{
		echo 0;
	}
?>

script.js

$(document).ready(function(){
	$(document).click(function(){
		$("#data_response_result").fadeOut('slow');
	});
	$("#suggestname").focus();
	var offset = $("#suggestname").offset();
	var width = $("#suggestname").width()-2;
	$("#data_response_result").css("left",offset.left); 
	$("#data_response_result").css("width",width);
	$("#suggestname").keyup(function(event){
		 var suggestname = $("#suggestname").val();
		 if(suggestname.length)
		 {
			 if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
			 {
				 $("#imgloading").css("visibility","visible");
				 $.ajax({
				   type: "POST",
				   url: "name_fetch.php",
				   data: "data="+suggestname,
				   success: function(msg){	
					if(msg != 0)
					  $("#data_response_result").fadeIn("slow").html(msg);
					else
					{
					  $("#data_response_result").fadeIn("slow");	
					  $("#data_response_result").html('<div style="text-align:left;">No Matches notexit</div>');
					}
					$("#imgloading").css("visibility","hidden");
				   }
				 });
			 }
			 else
			 {
				switch (event.keyCode)
				{
				 case 40:
				 {
					  notexit = 0;
					  $("li").each(function(){
						 if($(this).attr("class") == "selected")
							notexit = 1;
					  });
					  if(notexit == 1)
					  {
						var sel = $("li[class='selected']");
						sel.next().addClass("selected");
						sel.removeClass("selected");
					  }
					  else
						$("li:first").addClass("selected");
					 }
				 break;
				 case 38:
				 {
					  notexit = 0;
					  $("li").each(function(){
						 if($(this).attr("class") == "selected")
							notexit = 1;
					  });
					  if(notexit == 1)
					  {
						var sel = $("li[class='selected']");
						sel.prev().addClass("selected");
						sel.removeClass("selected");
					  }
					  else
						$("li:last").addClass("selected");
				 }
				 break;
				 case 13:
					$("#data_response_result").fadeOut("slow");
					$("#suggestname").val($("li[class='selected'] a").text());
				 break;
				}
			 }
		 }
		 else
			$("#data_response_result").fadeOut("slow");
	});
	$("#data_response_result").mouseover(function(){
		$(this).find("li a:first-child").mouseover(function () {
			  $(this).addClass("selected");
		});
		$(this).find("li a:first-child").mouseout(function () {
			  $(this).removeClass("selected");
		});
		$(this).find("li a:first-child").click(function () {
			  $("#suggestname").val($(this).text());
			  $("#data_response_result").fadeOut("slow");
		});
	});
});

Example

PHP – Ajax Auto Complete Search | Ajax autosuggest autocomplete from database using php | php autocomplete textbox from database

Related FAQ

Here are some more FAQ related to this Article: