AutoComplete with mysql php query - php

Question

I'm trying to get the autocomplete to be linked to another page on the server. here as follows:
<?php
if($_POST)
{
$q=$_POST['searchword'];
$q=addslashes($q);
if(strlen($q) >0) {
$sql_res=mysql_query("select `id`, `firstName`, `lastName`, `email`, `photo`, `phone` from contacts where user_id = '$_SESSION[user_id]' AND lower(concat_ws(' ', firstname, lastname)) like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$id = $row['id'];
$firstName=$row['firstName'];
$lastName=$row['lastName'];
$photo=$row['photo'];
$phone=$row['phone'];
$email = $row['email'];
$b_firstName='<b>'.$q.'</b>';
$b_lastName='<b>'.$q.'</b>';
$final_firstName = str_ireplace($q, $b_firstName, $firstName);
$final_lastName = str_ireplace($q, $b_lastName, $lastName);
$img_src = base64_decode($photo);
$imgbinary = fread(fopen($img_src, "r"), filesize($img_src));
$img_str = base64_encode($imgbinary);
?>
<div class="display_box" align="left">
<img src=<?php echo "'data:image/jpg;base64,$img_str'";?> style="width:58px; height:48px; float:left; margin-right:6px;" />
<span class="name"><?php echo $final_firstName; ?></span> <?php echo $final_lastName; ?>
<br/>
<span style="font-size:9px; color:#999999"><?php echo $phone; ?></span>
<span style="font-size:9px; color:#999999"><br/><?php echo $email; ?></span>
</div>
<?php
}
}
}
?>
that's the search.php.
Now on the main page I have this in the header:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search-text").keyup(function()
{
var inputSearch = $(this).val();
var dataString = 'searchword='+ inputSearch;
if(inputSearch!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#divResult").html(html).show();
}
});
}return false;
});
jQuery("#divResult").click(function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("put tag close div tag here").html($name).text();
$('#inputSearch').val(decoded);
});
jQuery(document).click( function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#divResult").fadeOut();
}
});
});
</script>
<style type="text/css">
.contentArea{
width:600px;
margin:0 auto;
}
#inputSearch
{
width:250px;
border:solid 1px #000;
padding:3px;
}
#divResult
{
position:absolute;
width:255px;
display:none;
margin-top:-1px;
border:solid 2px #dedede;
border-top:0px;
overflow:hidden;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
box-shadow: 0px 0px 5px #999;
border-style: solid;
border-color: #333 #000000 #000000;
background-color: white;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede;
font-size:12px; height:50px; line-height: 1.5;
}
.display_box:hover
{
background:#3399ff;
color:#FFFFFF;
cursor:pointer;
}
</style>
and this is the search bar:
<input class="search-text" id="inputSearch" name="search" type="text" placeholder="Search " value="" /><div id="divResult">
</div>
So basically what i'm trying to do is when a user searches and the auto complete comes up, they can click on the image/suggestion and it takes them to the page associated with that image.
Also if they click enter, the search will pick the first autocoplete and direct them to that page.
I'm new to javascript/jquery

Answer 1

First of all, you need to return unique data belongs to specific user in your ajax response.
For example, you can use user id. Your autocomplete item will be like;
<div class="display_box" align="left" id="<?php echo $id; ?>">
<img src=<?php echo "'data:image/jpg;base64,$img_str'";?> style="width:58px; height:48px; float:left; margin-right:6px;" />
<span class="name"><?php echo $final_firstName; ?></span> <?php echo $final_lastName; ?><br/>
<span style="font-size:9px; color:#999999"><?php echo $phone; ?></span>
<span style="font-size:9px; color:#999999"><br/><?php echo $email; ?></span>
</div>
When you clicked specific item, it will redirect related page. In your JS;
$(".display_box").on("click", function() {
var userId = $(this).attr("id");
window.location = "/user/" + userId;
});