最近の Web サイトでは、便利な検索ボックスが不可欠です。この機能により、ユーザーの検索プロセスが大幅に簡素化され、Web サイトのユーザー エクスペリエンスが向上します。検索ボックスの隣にプロンプト ボックスを追加すると、ユーザーの検索効率が新たなレベルに引き上げられます。そこでこの記事では、PHPを使って検索ボックスプロンプトボックス機能を実装する方法を紹介します。
1. 実装原則
PHP で検索プロンプト ボックスを実装するプロセスでは、AJAX テクノロジを使用する必要があります。主に以下の手順に分かれます。
2. 実装手順
まず、## という名前のデータベース テーブルを作成します。 #products の製品テーブルには次のフィールドが含まれています:
id int(11) 商品 ID name varchar(255) 商品名称 description text 商品描述 price decimal(10,2) 商品价格
query()## を記述する必要があります。 # データベースに接続してクエリを実行し、結果の配列を返す関数。例は次のとおりです。 <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>
<?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); } ?>
上記のコードは次の操作を実行します:
配列に保存します。
<!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>
上記のコードが実行されます。 次のように実行します。
に送信します。
上記の手順により、検索ボックスのプロンプトボックス機能を実装することができました。ユーザーが検索ボックスにキーワードを入力すると、Web ページは AJAX テクノロジを通じてキーワードをサーバーに送信します。サーバーはキーワードに基づいてデータベースにクエリを実行し、一致した結果を Web ページに返します。最後に、結果が検索ボックスの下に表示されます。検索プロンプトボックスの形式で、優れたユーザー検索エクスペリエンスを実現します。最良の結果を達成するために、実際のニーズに応じてこの特定の実装方法を柔軟に変更できます。
以上がPHPを使用して検索プロンプトボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。