PHPを使用して検索プロンプトボックスを実装する方法-PHPの問題-php.cn

PHPを使用して検索プロンプトボックスを実装する方法

PHPz

リリース： 2023-03-22 09:54:02

オリジナル

1681 人が閲覧しました

最近の Web サイトでは、便利な検索ボックスが不可欠です。この機能により、ユーザーの検索プロセスが大幅に簡素化され、Web サイトのユーザーエクスペリエンスが向上します。検索ボックスの隣にプロンプトボックスを追加すると、ユーザーの検索効率が新たなレベルに引き上げられます。そこでこの記事では、PHPを使って検索ボックスプロンプトボックス機能を実装する方法を紹介します。

1. 実装原則

PHP で検索プロンプトボックスを実装するプロセスでは、AJAX テクノロジを使用する必要があります。主に以下の手順に分かれます。

ユーザーは検索ボックスに検索キーワードを入力します。
キーワードをサーバー側の PHP スクリプトに送信します。
サーバー側では、データベースまたは他のデータソースにクエリを実行することによって、キーワードに関連する検索結果が取得されます。
検索結果を JSON データ形式にカプセル化し、クライアントに返します。
クライアントは、サーバーから返されたデータを受信すると、JavaScript を使用してそのデータを検索ボックスの下に表示し、検索プロンプトボックスを形成します。

2. 実装手順

データベーステーブルの確立

まず、## という名前のデータベーステーブルを作成します。 #products の製品テーブルには次のフィールドが含まれています:

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

ログイン後にコピー

query()## を記述する必要があります。 # データベースに接続してクエリを実行し、結果の配列を返す関数。例は次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?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); } ?></pre><div class="contentsignin">ログイン後にコピー</div></div>

検索プロンプトボックスロジックの書き込み

検索ボックスプロンプトボックスロジックを実装するコードは次のとおりです:

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

ログイン後にコピー

上記のコードは次の操作を実行します:

$data
配列に保存します。

<!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>

ログイン後にコピー

上記のコードが実行されます。次のように実行します。

search.php
に送信します。

3. まとめ

上記の手順により、検索ボックスのプロンプトボックス機能を実装することができました。ユーザーが検索ボックスにキーワードを入力すると、Web ページは AJAX テクノロジを通じてキーワードをサーバーに送信します。サーバーはキーワードに基づいてデータベースにクエリを実行し、一致した結果を Web ページに返します。最後に、結果が検索ボックスの下に表示されます。検索プロンプトボックスの形式で、優れたユーザー検索エクスペリエンスを実現します。最良の結果を達成するために、実際のニーズに応じてこの特定の実装方法を柔軟に変更できます。

以上がPHPを使用して検索プロンプトボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。