집 > 기사 > 백엔드 개발 > PHP를 사용하여 검색 프롬프트 상자를 구현하는 방법

PHP를 사용하여 검색 프롬프트 상자를 구현하는 방법

PHPz원래의: 2023-03-22 09:29:561617검색

현대 웹사이트에서는 유용한 검색창이 필수입니다. 이 기능은 사용자의 검색 프로세스를 크게 단순화하고 웹사이트의 사용자 경험을 향상시킬 수 있습니다. 검색 상자 옆에 프롬프트 상자를 추가하면 사용자의 검색 효율성이 새로운 수준으로 높아집니다. 그래서 이번 글에서는 PHP를 사용하여 검색창 프롬프트 상자 기능을 구현하는 방법을 소개하겠습니다.

1. 구현 원리

PHP에서 검색 프롬프트 상자를 구현하는 과정에서 AJAX 기술을 사용해야 합니다. 주로 다음과 같은 단계로 나누어집니다.

사용자가 검색창에 검색어를 입력합니다.
키워드를 서버 측 PHP 스크립트로 보냅니다.
서버 측에서는 데이터베이스나 기타 데이터 소스를 쿼리하여 키워드와 관련된 검색 결과를 얻습니다.
검색 결과를 JSON 데이터 형식으로 캡슐화하여 클라이언트에 반환합니다.
서버에서 반환된 데이터를 받은 후 클라이언트는 JavaScript를 사용하여 검색 상자 아래에 이를 표시하여 검색 프롬프트 상자를 형성합니다.

2. 구현 단계

데이터베이스 테이블 만들기

먼저 다음 필드가 포함된 products라는 제품 테이블을 만듭니다. products 的商品表，包含以下字段：

id          int(11)         商品 ID
name        varchar(255)    商品名称
description text            商品描述
price       decimal(10,2)   商品价格

编写数据库查询函数

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

<?php
function query($query) {
    $database = new PDO(&#39;mysql:host=localhost; dbname=database_name&#39;, &#39;database_user&#39;, &#39;database_password&#39;);
    $database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $database->prepare($query);
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>

编写搜索提示框逻辑

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

<?php
$keyword = $_GET[&#39;keyword&#39;];
if ($keyword) {
    $result = query("SELECT name FROM products WHERE name LIKE &#39;%$keyword%&#39; LIMIT 5");
    $data = array();
    foreach ($result as $row) {
        $data[] = $row[&#39;name&#39;];
    }
    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 += &#39;<div>' + data[i] + '</div>';
                        }
                        $('#search-result').html(html);
                    },
                    error: function() {
                        $('#search-result').html('无法获取数据！');
                    }
                });
            });
        });
    </script>
</body>
</html>

以上代码执行如下操作：

监听搜索框输入事件。
获取搜索框输入关键字并发送 AJAX 请求到 search.php데이터베이스 쿼리 함수 작성
데이터베이스에 연결하고 쿼리를 실행하여 결과 배열을 반환하는 query() 함수를 작성해야 합니다. 예는 다음과 같습니다.
rrreee

검색 상자 프롬프트 상자 로직을 구현하는 코드는 다음과 같습니다. rrreee위 코드는 다음 작업을 수행합니다.

$data

search.php

위 내용은 PHP를 사용하여 검색 프롬프트 상자를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：PHP에서 유형 비교를 수행하는 방법다음 기사：PHP에서 유형 비교를 수행하는 방법