使用 mysql php 查询自动完成

Question

我正在尝试将自动完成功能链接到服务器上的另一个页面。如下：

<?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>&nbsp;<?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
        }
    }
}
?>

这就是 search.php。

现在在主页上，我在标题中有这个：

<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>

这是搜索栏：

 <input class="search-text" id="inputSearch" name="search" type="text" placeholder="Search " value="" /><div id="divResult">
</div>

所以基本上我想要做的是当用户搜索并且自动完成出现时，他们可以点击图像/建议并将他们带到与该图像关联的页面。

此外，如果他们点击回车，搜索将选择第一个自动完成并将他们定向到该页面。

我是 javascript/jquery 新手

Answer 1

首先，您需要在 ajax 响应中返回属于特定用户的唯一数据。 例如，您可以使用用户 ID。您的自动完成项目将是这样的；

<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>&nbsp;<?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>

当您单击特定项目时，它将重定向相关页面。在你的 JS 中；

$(".display_box").on("click", function() {
    var userId = $(this).attr("id");
    window.location = "/user/" + userId;
});