Autocomplete Textbox using jQuery, PHP and MySQLi

Autocomplete Textbox using jQuery, PHP and MySQLi

Today, We want to share with you Autocomplete Textbox using jQuery, PHP and MySQLi.
In this post we will show you Autocomplete Textbox using jQuery, PHP and MySQLi, hear for Autocomplete Textbox using jQuery, PHP and MySQLi we will give you demo and example for implement.
In this post, we will learn about Autocomplete Textbox using jQuery, PHP and MySQLi with an example.

Steps : autocomplete textbox using jquery ajax in php

I hope Ajax Simple Autocomplete textbox(search data) is extremely any user friendly and easy to find for any Website.
New things are Autocomplete search BOX is a most imp. feature that suggests(Like j characters search to display result java,javascript,joomla,etc..) all the list of available options display for selection based string on the get to characters keyed in by the user specifc result.

File name : db.php

<?php
$db_hostname="localhost";
$db_username="root";
$db_userpassword="";
$database_connection = mysql_connect($db_hostname,$db_username,$db_userpassword);
$conn_database = mysql_select_db('pakainfo') or die("simple could not your connect database");
?>

Create a Table structure for table `autocomplete_pakainfo`

CREATE TABLE IF NOT EXISTS `autocomplete_pakainfo` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `email` varchar(60) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

Simple Query Execute to insert some records in mysql

INSERT INTO `autocomplete_pakainfo` (`id`, `name`, `email`) VALUES
(1, 'admin', '[email protected]'),
(2, 'php', '[email protected]'),
(3, 'laravel', '[email protected]'),
(4, 'angularjs', '[email protected]'),
(5, 'ci', '[email protected]'),
(6, 'asp.net', '[email protected]');

File Name : index.php

<html>
<head>
<title>Simple Autocomplete search using php, mysql and ajax : Example</title>
<script type="text/javascript" src="yourprojectname/jquery-1.8.0.min.js"></script>
</head>
<body>
	<div class="autocontentdata">
		<input type="text" class="autosearchdata" id="autosearchid" placeholder="write or put any text Search for people" />  Ex:Laravel, PHP, Angularjs<br /> 
			<div id="autocomplete_result_data">
			</div>
	</div>
</body>
<script type="text/javascript">
$(function(){
$(".autosearchdata").keyup(function() 
{ 
var autosearchid = $(this).val();
var autodataStringid = 'search='+ autosearchid;
if(autosearchid!='')
{
	$.ajax({
	type: "POST", // http method get or post
	url: "search.php", // action page redirect this data post
	data: autodataStringid, // object data send
	cache: false,  // cache details
	success: function(datahtml)
	{
	$("#autocomplete_result_data").html(datahtml).show();
	}
	});
}return false;    
});

jQuery("#autocomplete_result_data").live("click",function(e){ 
	var $clicked = $(e.target); // click to generate function
	var $data_name_auto = $clicked.find('.name').html();
	var autodecoded_data = $("<div/>").html($data_name_auto).text();
	$('#autosearchid').val(autodecoded_data);
});
jQuery(document).live("click", function(e) { //live check in function
	var $clicked = $(e.target); // click to generate function
	if (! $clicked.hasClass("autosearchdata")){ // add class to applay
	jQuery("#autocomplete_result_data").fadeOut(1000); 
	}
});
$('#autosearchid').click(function(){    // id to function call
	jQuery("#autocomplete_result_data").fadeIn(1000);
});
});
</script>
<style type="text/css">
	body{ 
		font-family:Tahoma, Geneva, sans-serif;
		font-size:15px;
	}
	.autocontentdata{
		width:957px;
		margin:1 auto;
	}
	#autosearchid
	{
		width:447px;
		border:solid 1px #0F0;
		padding:9px;
		font-size:12px;
	}
	#autocomplete_result_data
	{
		position:absolute;
		width:447px;
		padding:9px;
		display:none;
		margin-top:-1px;
		border-top:0px;
		overflow:hidden;
		border:1px #CCC solid;
		background-color: red;
	}
	.show
	{
		padding:9px; 
		border-bottom:2px #999 dashed;
		font-size:17px; 
		height:51px;
	}
	.show:hover
	{
		background:#4d85a4;
		color:#3djcf;
		cursor:pointer;
	}
</style>
</html>

search.php

include('db.php');//inclde database connection
if($_POST) //check if condition
{
	$query_data=$_POST['search'];
	$sql_res=mysql_query("select id,name,email from autocomplete where name like '%$query_data%' or email like '%$query_data%' order by id LIMIT 5");
	while($row=mysql_fetch_array($sql_res))
	{
		$name_users=$row['name'];
		$email=$row['email'];
		$business_usernames='<strong>'.$query_data.'</strong>';
		$business_email='<strong>'.$query_data.'</strong>';
		$latest_finals_usernames = str_ireplace($query_data, $business_usernames, $name_users);
		$latest_finals_emails = str_ireplace($query_data, $business_email, $email);
		?>
		<div class="show well" align="center">
		<img src="nameuserdauthor_old.PNG" style="width:52px; height:52px; float:left; margin-right:5px;" /><span class="name"><?php echo $latest_finals_usernames; ?></span> <br/><?php echo $latest_finals_emails; ?><br/>
		</div>
	<?php
	}
}

We hope you get an idea about Autocomplete Textbox using jQuery, PHP and MySQLi
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Google Like Autosuggest Search Using PHP Ajax
  2.   Ajax PHP MySQL Creating Autocomplete Search Suggestion
  3.   Date Range Search Jquery DatePicker using Ajax PHP with MySQL
  4.   Autocomplete Textbox using jQuery, PHP and MySQLi
  5.   VueJS Convert Comma separated String To Array Example
  6.   JavaScript Top 5 Most useful JSON Example
  7.   Javascript Autocomplete Address Using PHP With Demo
  8.   jQuery Add Remove Class on mouseOver mouseOut
  9.   Dynamic Autocomplete Textbox in jQuery Ajax
  10.   PHP Vue.js Live Search Box Using MySQL