Judul : Google Like Auto Suggest Search Using PHP Ajax
link : Google Like Auto Suggest Search Using PHP Ajax
Google Like Auto Suggest Search Using PHP Ajax
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)
);
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 :
Demikianlah Artikel Google Like Auto Suggest Search Using PHP Ajax
Sekianlah artikel Google Like Auto Suggest Search Using PHP Ajax kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Google Like Auto Suggest Search Using PHP Ajax dengan alamat link https://othereffect.blogspot.com/2016/06/google-like-auto-suggest-search-using.html
0 Response to "Google Like Auto Suggest Search Using PHP Ajax"
Post a Comment