Autosuggest教程与PHP和MySQL

Autosuggest tutorial with PHP and MySQL

本文关键字：MySQL PHP 教程 Autosuggest      更新时间：2023-09-26

我找到了一个关于如何用PHP创建一个简单的自动建议的教程&MySQL。这是我使用的教程:http://www.2my4edge.com/2013/08/autocomplete-search-using-php-mysql-and.html

当我尝试这个教程时，我发现了一个bug。当我搜索并点击图像或文本时，该项目将不会被选中。你必须点击"白色"区域。我已经尝试改变脚本，但我仍然有同样的问题，因为我仍然不太了解JavaScript。

这是教程脚本:

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"/>&nbsp; &nbsp; 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>&nbsp;<br/><?php echo $final_email; ?><br/>
        </div>
<?php
    }
}
?>

请帮我修复这个错误，因为我想在我的网站上应用这个自动建议。

在search.php文件中，而不是

< div class="show" align="left" >

添加
<a class="show" align="left" style="display:block" href="javascript:void(0)" 
onclick="$('#searchid').val(this.val)">

我没有检查它，但是检查一下onclick函数的语法错误，它会工作的

相关文章：