>im 制作一个自动完成搜索框，列出不同的课程，基本上 im 试图做的是使用它旁边的搜索按钮使用 SQL 数据库在另一个页面上显示所选课程的结果。该页面看起来像这样：索引.php
因此，无论您从自动完成中选择什么选项，我都希望"搜索课程"按钮链接到另一个页面，并立即在之前页面的搜索框中显示所选课程的结果。这些结果将从 SQL 数据库中提取。
我基本上无法将所有内容链接起来并且无法弄清楚。
这是我的搜索框和按钮：
<div class="row">
<div class="ui-widget col-md-4 col-md-offset-4">
<label for="tags">Search: </label>
<input id="tags" type="search">
<input type="submit" value="Search Courses">
</div>
</div>
我是否需要设置某种变量以传递到下一页？
感谢任何帮助，谢谢。
这是我的自动完成.php文件：
<?php
$mysqli = new mysqli("localhost", "scott", "tiger", "courses");
$term = mysqli_real_escape_string($mysqli,$_REQUEST['term']);
$query = "
SELECT title
FROM course
WHERE title LIKE '$term%'
ORDER BY title";
$return = array();
$result = $mysqli->query($query);
while ($row = $result->fetch_array()){
array_push($return,$row[0]);
}
echo json_encode($return);
?>
索引.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Edinburgh Napier University</title>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<img id="napierlogo" src="logo.jpg"/>
</div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tags" ).autocomplete({
source: "autocomplete.php",
autoFocus:true
});
});
</script>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
<script>
$(function() {
$( "input[type=submit]" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
<?php
isset($_GET['res'])?$var=mysql_escape_string($_GET['res']):$res='';
?>
</head>
<body>
<p></p>
<div class="row">
<div class="ui-widget col-md-4 col-md-offset-4">
<label for="tags">Search: </label>
<input id="tags" type="search">
<input type="submit" value="Search Courses">
</div>
</div>
<p></p>
<ul id="menu">
<li><a href="http://socwebtech1.napier.ac.uk/~40171342/course/index.php">Search</li>
<li><a href="http://my.napier.ac.uk/Pages/Home.aspx">myNapier</a></li>
<li>Contact Us
<ul>
<li><a href="https://www.facebook.com/EdinburghNapierUniversity/">Facebook</li>
<li><a href="https://twitter.com/EdinburghNapier? ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Twitter</li>
<li><a href="https://uk.linkedin.com/edu/edinburgh-napier-university-12617">LinkedIn</li>
</ul>
</li>
</ul>
</body>
</html>
首先，如果还没有，您的索引页需要是一个.php文件而不是.html。
其次，您需要将搜索框修改为单击搜索按钮时提交的表单。这将向 results.php 页面发送一个POST请求，然后可以使用在文本框中输入的搜索词从数据库加载结果。
您的文本框 html 代码应变为：
<div class="row">
<form action="results.php" method="post">
<div class="ui-widget col-md-4 col-md-offset-4">
<label for="tags">Search: </label>
<input id="tags" type="search" name="search">
<!-- Added the 'name' attribute ^ here
we'll need this later in the PHP file -->
<input type="submit" value="Search Courses">
</div>
</form>
</div>
结果.php顶部应该有一些类似于以下内容的 PHP 代码：
<?php
$searchTerm = $_POST["search"];
// Key part -> ^ ^
// this needs to match the name of the search box in html
// TODO -- Sanitize this input (NEVER trust user input)
// using mysqli_real_escape_string() or similar.
// Then use it to perform your search
// Just for testing:
echo $searchTerm;
有关$_POST的更多信息，请访问：http://php.net/manual/en/reserved.variables.post.php
作为旁注，您应该真正使用 PDO 进行数据库访问。它具有大量强大的功能，包括有助于防止SQL注入的"预准备语句"。这是最佳实践，对未来的可维护性有好处。
更多信息在这里： http://code.tutsplus.com/tutorials/why-you-should-be-using-phps-pdo-for-database-access--net-12059
JQuery 自动完成与 AJAX 一起使用时，source请求是 GET。 尝试将变量更改为 $_GET['term'] 并给您输入框一个name="term"。然后将您的函数更改为类似的东西。
$(document).on("ready",function() {
$( "#tags" ).autocomplete({
source: "autocomplete.php",
autoFocus:true
});
});
编辑：您还缺少某些链接上的结束标签。我建议整理您的HTML代码。