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

index.php

//  Pakainfo.com


 
  
 
 
 
 
 
Ajax Autocomplete textbox using jQuery, PHP and MySQL
   

      
7
     	 
 
		 Enter suggestname : 
		 
		 

	 
   
 
 

name_fetch.php

';
		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 = ''.$first.''.$last;
		
			echo '
'.$final.'
';
		}
		echo "";
	}
	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('
No Matches notexit
');
					}
					$("#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