Question

我正在制作一个列出不同课程的自动填充搜索框，基本上我想要做的就是使用旁边的搜索按钮，使用SQL数据库在另一个页面上显示所选课程的结果。该页面如下所示：index.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>

我是否需要设置某种变量才能传递到下一页？

感谢任何帮助，谢谢。

这是我的autocomplete.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);
?>

的index.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>

Answer 1

首先，如果它还没有，那么您的索引页必须是.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>

results.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进行数据库访问。它有很多很棒的功能，包括准备好的语句和＃34;这有助于防止SQL注入。这是它的最佳实践，对未来的可维护性有好处。

此处有更多信息：http://code.tutsplus.com/tutorials/why-you-should-be-using-phps-pdo-for-database-access--net-12059

Answer 2

在使用AJAX的JQuery自动完成时，source请求是GET。尝试将变量更改为$_GET['term']并为您输入一个name="term"输入框。然后将您的功能更改为此类功能。

$(document).on("ready",function() {         
  $( "#tags" ).autocomplete({
   source: "autocomplete.php",
   autoFocus:true
  });
});

编辑：您还缺少某些链接上的结束标记。我建议整理你的HTML代码。

在PHP

2 个答案: