溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用php實(shí)現(xiàn)一個(gè)搜索提示框

發(fā)布時(shí)間：2023-03-22 14:11:03 來(lái)源：億速云 閱讀：84 作者：iii 欄目：編程語(yǔ)言

本篇內(nèi)容主要講解“怎么用php實(shí)現(xiàn)一個(gè)搜索提示框”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用php實(shí)現(xiàn)一個(gè)搜索提示框”吧!

一、實(shí)現(xiàn)原理

在 PHP 實(shí)現(xiàn)搜索提示框的過(guò)程中，我們需要用到 AJAX 技術(shù)。主要分為以下幾個(gè)步驟：

  1. 用戶在搜索框中輸入搜索關(guān)鍵字。

  2. 把關(guān)鍵字發(fā)送給服務(wù)器端的 PHP 腳本。

  3. 在服務(wù)器端，通過(guò)查詢數(shù)據(jù)庫(kù)或其他數(shù)據(jù)源，獲取與關(guān)鍵字相關(guān)的搜索結(jié)果。

  4. 將搜索結(jié)果封裝成 JSON 數(shù)據(jù)格式并返回給客戶端。

  5. 客戶端收到服務(wù)器返回的數(shù)據(jù)后，使用 JavaScript 將其展現(xiàn)在搜索框下方，形成搜索提示框。

二、實(shí)現(xiàn)步驟

  1. 建立數(shù)據(jù)庫(kù)表

我們先建立一個(gè)名為 products 的商品表，包含以下字段：

id          int(11)         商品 ID
name        varchar(255)    商品名稱
description text            商品描述
price       decimal(10,2)   商品價(jià)格

  1. 編寫數(shù)據(jù)庫(kù)查詢函數(shù)

我們需要編寫一個(gè) query() 函數(shù)去連接數(shù)據(jù)庫(kù)并執(zhí)行查詢，返回結(jié)果數(shù)組。示例如下：

<?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. 編寫搜索提示框邏輯

實(shí)現(xiàn)搜索框提示框邏輯的代碼如下：

<?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);
}
?>

以上代碼執(zhí)行如下操作：

  • 從 GET 請(qǐng)求中獲取搜索關(guān)鍵字。

  • 查詢數(shù)據(jù)庫(kù)中與關(guān)鍵字匹配的前 5 個(gè)商品名稱，并將結(jié)果保存在 $data 數(shù)組中。

  • 將數(shù)據(jù)編碼成 JSON 格式并返回給客戶端。

  • 編寫客戶端代碼

實(shí)現(xiàn)搜索框提示框顯示的客戶端代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP 搜索框提示框?qū)嵗?lt;/title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="search-box" placeholder="請(qǐng)輸入搜索關(guān)鍵字">
    <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('無(wú)法獲取數(shù)據(jù)！');
                    }
                });
            });
        });
    </script>
</body>
</html>

以上代碼執(zhí)行如下操作：

  • 監(jiān)聽搜索框輸入事件。

  • 獲取搜索框輸入關(guān)鍵字并發(fā)送 AJAX 請(qǐng)求到 search.php。

  • 顯示 AJAX 返回的數(shù)據(jù)在搜索提示框中。

到此，相信大家對(duì)“怎么用php實(shí)現(xiàn)一個(gè)搜索提示框”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

php
AI
助
手