如何用php实现一个搜索提示框

2023-05-14 20:05:03 php 提示 如何用

在现代的网站上，一个有用的搜索框是不可或缺的。这个功能可以极大地简化用户的搜索流程，并提高网站的用户体验。而在搜索框旁边加上一个提示框，更是将用户的搜索效率提升到了一个新的高度。那么，本文将介绍如何使用 PHP 来实现一个搜索框提示框功能。

一、实现原理

在 php 实现搜索提示框的过程中，我们需要用到 ajax 技术。主要分为以下几个步骤：

  1. 用户在搜索框中输入搜索关键字。
  2. 把关键字发送给服务器端的 PHP 脚本。
  3. 在服务器端，通过查询数据库或其他数据源，获取与关键字相关的搜索结果。
  4. 将搜索结果封装成 JSON 数据格式并返回给客户端。
  5. 客户端收到服务器返回的数据后，使用 javascript 将其展现在搜索框下方，形成搜索提示框。

二、实现步骤

  1. 建立数据库表

我们先建立一个名为 products 的商品表，包含以下字段：

id          int(11)         商品 ID
name        varchar(255)    商品名称
description text            商品描述
price       decimal(10,2)   商品价格
  1. 编写数据库查询函数

我们需要编写一个 query() 函数去连接数据库并执行查询，返回结果数组。示例如下：

<?php
function query($query) {
    $database = new PDO('Mysql:host=localhost; dbname=database_name', 'database_user', 'database_passWord');
    $database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $database->prepare($query);
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>
  1. 编写搜索提示框逻辑

实现搜索框提示框逻辑的代码如下：

<?php
$keyword = $_GET['keyword'];
if ($keyword) {
    $result = query("SELECT name FROM products WHERE name LIKE '%$keyword%' LIMIT 5");
    $data = array();
    foreach ($result as $row) {
        $data[] = $row['name'];
    }
    echo json_encode($data);
}
?>

以上代码执行如下操作：

  • 从 GET 请求中获取搜索关键字。

  • 查询数据库中与关键字匹配的前 5 个商品名称，并将结果保存在 $data 数组中。

  • 将数据编码成 JSON 格式并返回给客户端。

  • 编写客户端代码

实现搜索框提示框显示的客户端代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP 搜索框提示框实例</title>
    <script src="https://cdn.bootCSS.com/Jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="search-box" placeholder="请输入搜索关键字">
    <div id="search-result"></div>
    <script>
        $(document).ready(function() {
            $('#search-box').keyup(function() {
                var keyword = $(this).val();
                $.ajax({
                    url: 'search.php',
                    type: 'GET',
                    dataType: 'json',
                    data: {keyword: keyword},
                    success: function(data) {
                        var html = '';
                        for (var i = 0; i < data.length; i++) {
                            html += '<div>' + data[i] + '</div>';
                        }
                        $('#search-result').html(html);
                    },
                    error: function() {
                        $('#search-result').html('无法获取数据！');
                    }
                });
            });
        });
    </script>
</body>
</html>

以上代码执行如下操作：

  • 监听搜索框输入事件。

  • 获取搜索框输入关键字并发送 AJAX 请求到 search.php。

  • 显示 AJAX 返回的数据在搜索提示框中。

三、总结

通过以上步骤，我们成功实现了一个搜索框提示框功能。用户在搜索框中输入关键字，网页通过 AJAX 技术将关键字发送到服务器端，服务器根据关键字查询数据库并返回匹配结果给网页，最后将结果以搜索提示框形式展现在搜索框下边，实现了优秀的用户搜索体验。这具体的实现方法我们可以根据实际需求进行灵活修改，以达到最佳的效果。

以上就是如何用php实现一个搜索提示框的详细内容，更多请关注其它相关文章！

相关文章