ホームページ  >  記事  >  バックエンド開発  >  PHPを使用して検索プロンプトボックスを実装する方法

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

PHPz
PHPzオリジナル
2023-03-22 09:29:561688ブラウズ

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

1. 実装原則

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

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

2. 実装手順

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

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

id          int(11)         商品 ID
name        varchar(255)    商品名称
description text            商品描述
price       decimal(10,2)   商品价格
    データベース クエリ関数の書き込み

query()## を記述する必要があります。 # データベースに接続してクエリを実行し、結果の配列を返す関数。例は次のとおりです。 <pre class="brush:php;toolbar:false">&lt;?php function query($query) { $database = new PDO(&amp;#39;mysql:host=localhost; dbname=database_name&amp;#39;, &amp;#39;database_user&amp;#39;, &amp;#39;database_password&amp;#39;); $database-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);     $stmt = $database-&gt;prepare($query);     $stmt-&gt;execute();     return $stmt-&gt;fetchAll(PDO::FETCH_ASSOC); } ?&gt;</pre>

検索プロンプト ボックス ロジックの書き込み
  1. 検索ボックス プロンプト ボックス ロジックを実装するコードは次のとおりです:
<?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

    に送信します。

  • AJAX から返されたデータを検索プロンプト ボックスに表示します。
3. まとめ

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。