I found a tutorial on how to create a simple autosuggest with PHP & MySQL. This is the tutorial I'm using: http://www.2my4edge.com/2013/08/autocomplete-search-using-php-mysql-and.html
When I try this tutorial, I'm finding a bug. When I search, and click on the image or text, the item will not be selected. You have to click in the "white" area. I have tried to change the script, but I still have the same problem, because I still don't know much about JavaScript.
This is the tutorial script:
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Autocomplete search using php, mysql and ajax</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".search").keyup(function () {
var searchid = $(this).val();
var dataString = 'search=' + searchid;
if (searchid != '') {
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function (html) {
$("#result").html(html).show();
}
});
}
return false;
});
jQuery("#result").live("click", function (e) {
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function (e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("search")) {
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function () {
jQuery("#result").fadeIn();
});
});
</script>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
}
.content {
width: 900px;
margin: 0 auto;
}
#searchid {
width: 500px;
border: solid 1px #000000;
padding: 10px;
font-size: 14px;
}
#result {
position: absolute;
width: 500px;
padding: 10px;
display: none;
margin-top: -1px;
border-top: 0px;
overflow: hidden;
border: 1px #cccccc solid;
background-color: white;
}
.show {
padding: 10px;
border-bottom: 1px #999999 dashed;
font-size: 15px;
height: 50px;
}
.show:hover {
background: #4c66a4;
color: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<form method="post">
<input type="text" class="search" id="searchid" name="searchid"
placeholder="Search for people"/> Ex:arunkumar, shanmu, vicky<br/>
</form>
<div id="result">
</div>
</div>
</body>
</html>
Search.php
<?php
include('db.php');
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select id,name,email from autocomplete where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['name'];
$email=$row['email'];
$b_username='<strong>'.$q.'</strong>';
$b_email='<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<img src="author.PNG" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span> <br/><?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>
Please help me to fix this bug, because I want to apply this autosuggest for my website.
