Hope that everyone knows the word Instant search. If not then you would have certainly noticed the coming of suggestion keywords when you start typing something in google. In simple that process is called Instant search. You can also implement the same function in your website. here iam explaining how to make instant search function by fetching keywords directly from database. here iam using a jquery library, which i found to be very simple in merging with our code. below is the code.. Just copy & paste code..
Make sure that you have connected a databse and have a sample table `cms_instant` and with fields id, title.etc... So that you can customize above code in your other projects.
<?php
ob_start();
include("autoload.php");
$db = new MySql();
$db->connect();
$in=new Instant();
$intdet=$in->getal();// fetching keyword from database
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Instant search </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>// keywords for instant search
$(function() {
var availableTags = [
<?php for($i=0;$i<count($intdet);$i++){ ?>
<?php echo '"'; ?>
<?php echo $intdet[$i]['name']; ?>
<?php echo '"'; ?>
<?php echo ','; ?>
<?php } ?>
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
No comments:
Post a Comment