`id` int(11) NOT NULL AUTO_INCREMENT,
`product_name` varchar(255) NOT NULL,
`price` int(50) NOT NULL,
`stock_status` int(2) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;
INSERT INTO `products` (`id`, `product_name`, `price`, `stock_status`) VALUES
(1, 'Apple cinema', 400000, 1),
(2, 'Samsung Galaxy Note II', 90000, 1),
(3, 'Sony Vaio', 250000, 0),
(4, 'Apple Ipad', 67000, 1),
(5, 'Canon', 250000, 1),
(6, 'Ipod Classic', 27000, 0),
(7, 'HP mini', 54300, 1),
(8, 'Nikon Extra Zoom', 200000, 1);
html
<!DOCTYPE html> <html> <head> <title>Php ajax live search</title> <script type="text/javascript" src="/jquery-1.7.1.min.js"></script> <link rel="stylesheet" href="/styles.css" /> </head> <body> <div class="container"> <h1 class="logo">LIVE SEARCH</h1> <p>Enter the name of product you want to search for, a suggestion appear below</p> <form action="search.php" method="post" id="search-form"/> <label>Search Products</label> <input type="text" name="keyword" id="txt-search" class="input" placeholder="search products" /> <div class="suggestion" id="result"> </div> </form> </div> </body> </html>css
body{color:#666;
margin:0px;
padding:0px;
font-family:arial;
background:#f2f2f2;
font-size:12px;
}
.container{background:#fff;
padding:34px 15px;
margin:50px auto;
position:relative;
display:block;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-o-border-radius:15px;
width:940px;
border:1px solid #ddd;
}
.input{border:1px solid #ccc;
padding:9px;
border-radius:6px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.input:focus{-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
border-color:rgba(82, 168, 236, 0.6);
}
label{display:block;
padding:4px;
font-weight:bold;
}
.suggestion{background:#fff;
border:1px solid #ddd;
position:absolute;
width:400px;
height:auto;
padding:10px;
z-index:12;
margin-top:-4px;
box-shadow: 0px 3px 6px #666;
-moz-box-shadow: 0px 3px 6px #666;
-webkit-box-shadow: 0px 3px 6px #666;
-o-box-shadow: 0px 3px 6px #666;
border-radius:0px 0px 18px 18px;
display:none;
}
jquery
<script type="text/javascript">
//run the code when the dom is ready
$(function() {
//select the input box on focus
$("#txt-search").focus(function() {
//then we make the suggestion div fade in
$("#result").fadeIn();
//we then attach a status text to it
$("#result").html("<p align='center'>Loading suggestions...</p>");
//let make an ajaxx request when the keyboard key is up.
$(this).keyup(function() {
//we then grab the value in the input box
var productname = $(this).val();
//Now send the ajax request
$.ajax({type:"POST",url:"search.php",data:"product="+productname,success:function(response) {
//attach the reesult from the php page to the result page.
$('#result').html(response);
}
});
});
});
});
</script>
php
<?php
//connect to mysql database
$conn = mysql_connect('localhost','root','');
if($conn) {
$db = mysql_select_db("filemanager",$conn);
if(!$db) {
die("Database does not exists, please choose a different one!");
}
} else {
die("Connection to the database failed".mysql_error());
}
//check if the data was sent here
if(isset($_POST['product'])) {
//store the value in a variable
$product = mysql_real_escape_string($_POST['product']);
echo "<h4>Result for: $product</h4>";
//perform sql query
$query = mysql_query("SELECT * FROM products WHERE product_name LIKE '%$product%' LIMIT 20");
if($query) {
//if the query succeed
if(mysql_num_rows($query) > 0) {
echo "<ol>";
while($row = mysql_fetch_assoc($query)) { ?>
<li><a href="/view-products.php?id=<?php echo $row['id']
?>"><?php echo $row['product_name']; ?></a>
(<s>N</s>
<?php echo number_format($row['price'],0,'.',','); ?>)</li>
<?php
}
echo "</ol>";
} else {
echo "No suggestion found!";
}
} else {
die(mysql_error());
}
}
?>
0 komentar:
Posting Komentar