我找到了一个关于如何使用 PHP 和 MySQL 创建简单的自动建议的教程。这是我正在使用的教程:http://www.2my4edge.com/2013/08/autocomplete-search-using-php-mysql-and.html
当我尝试本教程时，我发现了一个错误。当我搜索并单击图像或文本时，该项目将不会被选择。您必须单击“白色”区域。我尝试过更改脚本，但仍然遇到同样的问题，因为我对 JavaScript 还不太了解。
这是教程脚本:
索引.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>
搜索.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
}
}
?>
请帮助我修复此错误，因为我想为我的网站应用此自动建议。
最佳答案
在 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 函数的语法错误，它就会起作用
关于javascript - PHP 和 MySQL 的自动建议教程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30644176/