PHP MySQL Autocomplete textbox using jQuery

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

Read Also:  Autocomplete Textbox with Multiple Values using jQuery PHP and MySQL

//  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

Read Also:  How To Find The Second Highest Salary In SQL Server?

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:

  1. Read Also:  PHP Crop/Resize Image Function using GD Library
  2. Read Also:  PHP Laravel Eloquent join with subquery
  3. Read Also:  CodeIgniter Enable Disable debug mode
  4. Read Also:  How to create category menu list using css and JQuery?
  5. Read Also:  Polymorphism in PHP Object-oriented programming Examples
  6. Read Also:  Class HTML not found laravel
  7. Read Also:  vuejs Simple calculator web Application
  8. Read Also:  SQL Inner, Left, Right and Full Joins
  9. Read Also:  Class HTML not found laravel
  10. Read Also:  SQL Inner, Left, Right and Full Joins