jQuery ajax仿Google自动提示SearchSuggess功能示例

下面我将为你讲解“jQuery ajax仿Google自动提示SearchSuggess功能示例”的完整攻略。

简介

在网页中，我们经常需要使用搜索框来搜索一些内容，但是当我们输入关键词时，往往会出现一些自动提示，比如Google搜索框中的SearchSuggess功能。这种功能可以帮助我们更快地找到自己需要的信息，提高了搜索效率。本文将讲述如何使用jQuery ajax来实现类似的功能。

实现步骤

1. HTML页面设计

我们首先需要在HTML页面中设计一个搜索框，代码如下：

  <div>
    <label for="search">搜索：</label>
    <input type="text" id="search" name="search" autocomplete="off">
    <div id="searchResults"></div>
  </div>

其中，id="search"表示搜索框的id，name="search"表示搜索框的名称，autocomplete="off"表示关闭浏览器自动提示功能。

1. jQuery ajax实现

接下来，我们需要使用jQuery ajax来获取服务器返回的自动提示信息，代码如下：

  $(document).ready(function() {
    $("#search").keyup(function() {
      var searchText = $(this).val();
      if (searchText !== "") {
        $.ajax({
          type: "POST",
          url: "searchSuggess.php",
          data: {searchText: searchText},
          success: function(response) {
            $("#searchResults").html(response).show();
          }
        });
      } else {
        $("#searchResults").hide();
      }
    });
  });

其中，$(document).ready()表示文档加载完成后执行的函数，$("#search").keyup()表示输入框中的键盘抬起事件，var searchText = $(this).val()表示获取输入框中的搜索文本，$.ajax()表示使用ajax发送请求，type: "POST"表示使用POST请求方式，url: "searchSuggess.php"表示服务器端的处理程序，data: {searchText: searchText}表示发送给服务器端的数据，success: function(response) {...}表示ajax请求成功后执行的函数，$("#searchResults").html(response).show()表示将服务器返回的数据显示在页面上并显示出来，$("#searchResults").hide()表示隐藏提示框。

1. 服务器端的处理程序

最后，我们需要在服务器端编写处理程序，用来根据搜索框中的内容获取自动提示信息。代码如下：

  <?php
  $db = mysqli_connect("localhost", "root", "password", "test");
  if (!$db) {
    die("Connection failed: " . mysqli_connect_error());
  }
  if (isset($_POST["searchText"])) {
    $searchText = $_POST["searchText"];
    $query = "SELECT * FROM product WHERE name LIKE '%$searchText%'";
    $result = mysqli_query($db, $query);
    if (mysqli_num_rows($result) > 0) {
      while ($row = mysqli_fetch_assoc($result)) {
        echo "<div>" . $row["name"] . "</div>";
      }
    } else {
      echo "<div>没有匹配的结果</div>";
    }
  }
  mysqli_close($db);
  ?>

其中，$db = mysqli_connect("localhost", "root", "password", "test")表示连接数据库，$query = "SELECT * FROM product WHERE name LIKE '%$searchText%'"表示根据搜索文本获取数据库中匹配的产品名，echo "<div>" . $row["name"] . "</div>"表示将匹配的结果以div显示在页面上，mysqli_close($db)表示关闭数据库连接。

示例说明

1. 数据库的连接和查询

在服务器端的处理程序中，我们连接了一个名为“test”的数据库，并从数据库中查询了与搜索文本匹配的产品名。如果你需要使用这个示例，需要根据自己的实际情况修改数据库的连接信息和查询语句。

1. 自动提示框的显示和隐藏

在客户端的jQuery ajax实现中，我们根据输入框的内容来显示或隐藏自动提示框，这可以避免在搜索框为空的时候显示无意义的提示信息。

以上就是本文讲述的“jQuery ajax仿Google自动提示SearchSuggess功能示例”的完整攻略。