Friday, 3 June 2016

Google Like Auto Suggest Search Using PHP Ajax

05:34

Google Like Auto Suggest Search Using PHP Ajax :


first  of   create table  product:


create   table    product
(

id  int primary key auto_increment,

 name  varchar(200),

 price  varchar(200)

 );


(1)write code for style.css file:
body
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul
{
list-style: none;
margin: 17px 20px 20px 24px;
width: 330px;
}
li
{
display: block;
padding: 5px;
background-color: #ccc;
border-bottom: 1px solid #367;
}
#content
{
padding:50px;
width:500px; border:1px solid #666;
float:left;
}
#clear
{ clear:both; }
#box
{
float:left;
margin:0 0 20px 0;
text-align:justify;
}
input[type=text]
{width:330px; height:35px;}
input[type=submit]
{
width:90px; height:35px;
}

(2) write   code for  ajax.php  file:
<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("manu",$query);
if(isset($_POST['name']))
{
$name=trim($_POST['name']);
$query2=mysql_query("SELECT * FROM product WHERE name LIKE '%$name%'");
echo "<ul>";
while($query3=mysql_fetch_array($query2))
{
?>

<li   onclick='fill("<?php echo $query3['name']; ?>")'><?php echo $query3['name']; ?> </li>
<?php
}
}
?>
</ul>


(3)now write code for    myinedx.php   file  :

<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("manu",$query); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <link rel="stylesheet" href="style.css" type="text/css">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function fill(Value)
{
$('#name').val(Value);
$('#display').hide();
}

$(document).ready(function(){
$("#name").keyup(function() {
var name = $('#name').val();
if(name=="")
{
$("#display").html("");
}
else
{
$.ajax({
type: "POST",
url: "ajax.php",
data: "name="+ name ,
success: function(html){
$("#display").html(html).show();
}
});
}
});
});
</script>
</head>
<body>
<div id="content">
<?php
$val='';
if(isset($_POST['submit']))
{
if(!empty($_POST['name']))
{
$val=$_POST['name'];
}
else
{
$val='';
}
}
?>
<center><img src="freeze.PNG"></center>
<form method="post" action="myindex.php">
Search : <input type="text" name="name" id="name" autocomplete="off"
value="<?php echo $val;?>">
<input type="submit" name="submit" id="submit" value="Search">
</form>

<div id="display"></div>
<?php
if(isset($_POST['submit']))
{
if(!empty($_POST['name']))
{
$name=$_POST['name'];
$query3=mysql_query("SELECT * FROM product WHERE name LIKE '%$name%' ");
while($query4=mysql_fetch_array($query3))
{
echo "<div id='box'>";
echo "<b>".$query4['name']."</b>";
echo "<div id='clear'></div>";
echo $query4['price'];
echo "</div>";
}
}
else
{
echo "No Results";
}
}
?>
</div>
</body>
</html>

Now run your   myinedx.php file:

output :




Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

2 comments:

  1. These programs will surely helps a lot of students. thanks for posting it.

    ReplyDelete
  2. This “php ustad” tutorial blog is designed for beginners – to learn php at home step by step using simple programming examples

    ReplyDelete

PHP Training Mumbai, PHP MySQL Training Mumbai, PHP Course Mumbai, PHP Institute Mumbai

 

© 2013 PHP TRAINING IN MUMBAI BY OM SIR . All rights resevered. Designed by OM SIR

Back To Top