PHPを使用して検索プロンプトボックスを実装する方法
最近の 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['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);
}
?>上記のコードは次の操作を実行します:
- 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 += '<div>' + data[i] + '</div>';
}
$('#search-result').html(html);
},
error: function() {
$('#search-result').html('无法获取数据！');
}
});
});
});
</script>
</body>
</html>上記のコードが実行されます。 次のように実行します。
- 検索ボックスの入力イベントをリッスンします。
- 検索ボックスを取得してキーワードを入力し、AJAX リクエストを
- search.php
に送信します。
AJAX から返されたデータを検索プロンプト ボックスに表示します。
上記の手順により、検索ボックスのプロンプトボックス機能を実装することができました。ユーザーが検索ボックスにキーワードを入力すると、Web ページは AJAX テクノロジを通じてキーワードをサーバーに送信します。サーバーはキーワードに基づいてデータベースにクエリを実行し、一致した結果を Web ページに返します。最後に、結果が検索ボックスの下に表示されます。検索プロンプトボックスの形式で、優れたユーザー検索エクスペリエンスを実現します。最良の結果を達成するために、実際のニーズに応じてこの特定の実装方法を柔軟に変更できます。
以上がPHPを使用して検索プロンプトボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7318
9
1625
14
1349
46
1261
25
1209
29
Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド
Dec 24, 2024 pm 04:42 PM
PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。 このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。
CakePHP ファイルのアップロード
Sep 10, 2024 pm 05:27 PM
ファイルのアップロードを行うには、フォーム ヘルパーを使用します。ここではファイルアップロードの例を示します。
CakePHP について話し合う
Sep 10, 2024 pm 05:28 PM
CakePHP は、PHP 用のオープンソース フレームワークです。これは、アプリケーションの開発、展開、保守をより簡単にすることを目的としています。 CakePHP は、強力かつ理解しやすい MVC のようなアーキテクチャに基づいています。モデル、ビュー、コントローラー
PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法
Dec 20, 2024 am 11:31 AM
Visual Studio Code (VS Code とも呼ばれる) は、すべての主要なオペレーティング システムで利用できる無料のソース コード エディター (統合開発環境 (IDE)) です。 多くのプログラミング言語の拡張機能の大規模なコレクションを備えた VS Code は、
