我们来详细讲解如何用PHP和AJAX做出仿百度搜索下拉自动提示框。

1. 准备工作

首先，需要保证本地计算机已经安装了 PHP 和 Apache 服务器。另外，需要一个文本编辑器来编写代码。

2. 编写 HTML 文件

在本地计算机上，创建一个 HTML 文件，并在文件中添加一个文本框作为搜索框。HTML代码结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>仿百度搜索下拉自动提示框</title>
</head>
<body>
  <input type="text" id="searchBox" placeholder="请输入搜索内容">
  <ul id="searchResult"></ul>
</body>
</html>

这里的搜索框使用了<input>元素，其id为“searchBox”。用于展示搜索建议的列表使用了<ul>元素，其id为“searchResult”。

3. 编写 PHP 文件

在本地计算机上，创建一个 PHP 文件，用于处理搜索框中的输入并返回匹配的搜索建议。PHP文件代码结构如下：

<?php

$search =$_GET["search"];

$conn = new mysqli("localhost", "username", "password", "database_name");

$sql = "SELECT * FROM searchtable WHERE keyword LIKE '%$search%'";
$result = $conn->query($sql);

$data = array();

while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

echo json_encode($data);

?>

这里的$search是通过 GET 方法获取的搜索框中的输入。然后，从数据库中获取与输入相匹配的搜索建议，并将结果存储在一个数组中。最后，将结果以JSON格式返回给前端。

4. 编写 AJAX 请求

在本地计算机上，创建一个 JavaScript 文件，并使用 AJAX 技术从 PHP 文件中获取搜索建议。JavaScript代码结构如下：

var searchBox = document.getElementById("searchBox");
var searchResult = document.getElementById("searchResult");

searchBox.onkeyup = function() {
    var search = searchBox.value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "search.php?search=" + search, true);
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            var html = "";
            for (var i = 0; i < data.length; i++) {
                html += "<li>" + data[i]["keyword"] + "</li>";
            }
            searchResult.innerHTML = html;
        }
    }
}

这里，使用了XMLHttpRequest对象来发起 AJAX 请求。每次搜索框内输入字符的时候，就会通过 AJAX 请求向 PHP 文件发送请求，获取与输入相匹配的搜索建议。并将搜索建议展示在搜索框下面，用<li>元素实现列表。

5. 示例说明

下面，我们来介绍两个示例，说明如何应用以上知识。这两个示例都是基于以上的代码来实现的。

示例1：搜索建议带有链接

在数据库中除了储存搜索建议文字外还储存着对应的网址。因此，在搜索建议框下方列出搜索结果时，可以通过嵌套<a>元素来为每一条搜搜建议设置链接。代码结构如下：

var searchBox = document.getElementById("searchBox");
var searchResult = document.getElementById("searchResult");

searchBox.onkeyup = function() {
    var search = searchBox.value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "search.php?search=" + search, true);
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            var html = "";
            for (var i = 0; i < data.length; i++) {
                html += "<li><a href='" + data[i]["url"] + "'>" + data[i]["keyword"] + "</a></li>";
            }
            searchResult.innerHTML = html;
        }
    }
}

示例2：搜索建议的过滤

这个示例可以通过对前端JavaScript代码的变更实现。这里展示的是通过将数据大小写转换后再进行模糊匹配实现搜索建议过滤。代码结构如下：

var searchBox = document.getElementById("searchBox");
var searchResult = document.getElementById("searchResult");

searchBox.onkeyup = function() {
    var search = searchBox.value.toLowerCase();
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "search.php?search=" + search, true);
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            var html = "";
            for (var i = 0; i < data.length; i++) {
                var keyword = data[i]["keyword"].toLowerCase();
                if (keyword.indexOf(search) >= 0) {
                    html += "<li>" + data[i]["keyword"] + "</li>";
                }
            }
            searchResult.innerHTML = html;
        }
    }
}

这里的变化在于对搜索框输入的大小写字母进行转换后再进行匹配，达到模糊匹配搜索建议的目的。

这就是使用 PHP 和 AJAX 做出仿百度搜索下拉自动提示框的攻略及示例说明。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：php+ajax做仿百度搜索下拉自动提示框(有实例) - Python技术站

php+ajax做仿百度搜索下拉自动提示框(有实例)