Hi Friends,
It's very easy to implement Auto Suggestion while you implement Searching functionality for any thing want to search by entering test in search text box.
I hope below code that i'm sharing here is help you to implement Auto Suggestion using jQuery Ajax in Php Mysql.
jQuery Ajax Auto Suggestion in Php My-SQL
index.html Page Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vijay lathiya : Auto Suggestion</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#txt_search_name").keyup(function()
{
var searchbox = jQuery(this).val();
var dataString = searchbox;
if(searchbox=='')
{
jQuery('#display').hide();
}
else
{
jQuery.ajax({
type: "GET",
url: "ajax/search.php?val="+searchbox,
success: function(html)
{
jQuery("#display").html(html).show();
}
});
}
return false;
});
});
function fill(thisValue)
{
jQuery('#txt_search_name').val(thisValue);
jQuery('#display').hide();
}
jQuery(function($){
$("#txt_search_name").Watermark("Search");
});
</script>
</head>
<body>
<div> Search :
<input type="text" name="txt_search_name" id="txt_search_name"/>
<div id="display"></div>
</div>
</body>
</html>
Style.CSS Page Code
input[type="text"] {
border: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
box-shadow: -3px 2px 3px #CCCCCC inset;
color: #000000;
line-height: 140%;
padding: 3px;
width: 180px;
}
#display {
background-color: #cccccc;
border-bottom: 1px solid #DEDEDE;
border-left: 1px solid #DEDEDE;
border-right: 1px solid #DEDEDE;
display: none;
float: right;
margin-right: 30px;
overflow: hidden;
position: absolute;
width: 180px;
z-index: 1;
margin-left:5%;
}
.display_box {
border-top: 1px solid #DEDEDE;
font-size: 14px;
height: 25px;
padding: 2px;
}
search.php Page Code
<?php
include("../config.php");
$q=$_GET['val'];
$sql = "select * from user where name like '%$q%' order by id LIMIT 9";
$rs1=mysql_query($sql);
while($row1 = mysql_fetch_assoc($rs1))
{
$name=$row1['name'];
$re_fname='<b>'.$q.'</b>';
$final_name = str_replace($q, $re_fname, $name);
?>
<div class="display_box" align="left" onclick="fill('<?php echo $name; ?>')"> <?php echo $final_name; ?></div>
<?php
}
?>
My-Sql DB Query
--
-- Database: `autosuggestion`
--
--
-- Table structure for table `user`
--
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`id`, `name`) VALUES
(1, 'vijay lathiya'),
(2, 'vijay patel'),
(3, 'sandip mistry'),
(4, 'vimal patel'),
(5, 'vikas patel'),
(6, 'videy patel'),
(7, 'vipul khunt');
config.php Database connection Code
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "autosuggestion";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
0 Comments