日本語
日本語
最新のWeb開発では、検索機能は非常に重要なコンポーネントです。ユーザーエクスペリエンスを向上させるために、多くのWebサイトが検索ボックスの下に検索提案を表示して、ユーザーがより迅速に必要な情報を見つけるのに役立ちます。この記事では、簡単な例を使用して、PHPとMySQLI_RESULT関数を使用してバックエンド検索提案インターフェイス関数を実装する方法を示します。
まず、データベースに接続する必要があります。以下は、PHPのmysqli拡張機能を使用して接続するコードです。
<?php
$host = "localhost";
$username = "root";
$password = "yourpassword";
$database = "yourdatabase";
$conn = new mysqli($host, $username, $password, $database);
// 接続を確認してください
if ($conn->connect_error) {
die("接続に失敗しました: " . $conn->connect_error);
}
?>
このコードはデータベースサーバーに接続し、データベースを選択して後続のクエリを実行します。
ユーザーがキーワードを入力できるようにする簡単な検索提案インターフェイスを作成し、バックエンドは基準を満たす提案のリストを返します。この機能を実装するコードは次のとおりです。
<?php
// ユーザーが入力したキーワードを取得します
$keyword = isset($_GET['query']) ? $_GET['query'] : '';
// 防ぐ SQL 注射
$keyword = $conn->real_escape_string($keyword);
// クエリを定義します SQL 声明
$sql = "SELECT * FROM products WHERE name LIKE '%$keyword%' LIMIT 5";
// クエリを実行します
$result = $conn->query($sql);
// クエリが成功したかどうかを判断します
if ($result->num_rows > 0) {
$suggestions = [];
while ($row = $result->fetch_assoc()) {
$suggestions[] = $row['name'];
}
echo json_encode($suggestions); // 検索提案リストに戻ります
} else {
echo json_encode([]); // 一致する結果がない場合，空の配列を返します
}
$conn->close();
?>
上記のコードでは、最初に$ _get ['query']を使用してユーザーが入力したクエリ文字列を取得し、 real_escape_string（）メソッドを使用して、SQLインジェクション攻撃を避けます。次に、SQLステートメントを使用して、ユーザーが入力したキーワードに一致するデータベースの製品テーブルのレコードをクエリし、最大5つの提案を返します。
mysqli_resultオブジェクトは、fetch_assoc（）メソッドを介して各行の結果を取り出し、配列$の提案に保存します。最後に、この配列をJSON形式に変換して出力します。フロントエンドは、Ajaxを介して検索提案を受け取り、表示できます。
このバックエンドインターフェイスをフロントエンドページで動作させるには、フロントエンドでJavaScriptを使用して、AJAXを介してバックエンドにリクエストを送信し、返されたデータを受信する必要があります。これが簡単なフロントエンドコードの例です。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>提案の例を検索します</title>
<style>
#suggestions {
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
}
.suggestion-item {
padding: 8px;
cursor: pointer;
}
.suggestion-item:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<input type="text" id="search" placeholder="検索キーワードを入力します..." oninput="getSuggestions()">
<div id="suggestions"></div>
<script>
function getSuggestions() {
var query = document.getElementById('search').value;
if (query.length > 0) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'search_suggestions.php?query=' + query, true);
xhr.onload = function() {
if (xhr.status == 200) {
var suggestions = JSON.parse(xhr.responseText);
displaySuggestions(suggestions);
}
}
xhr.send();
} else {
document.getElementById('suggestions').innerHTML = '';
}
}
function displaySuggestions(suggestions) {
var suggestionsDiv = document.getElementById('suggestions');
suggestionsDiv.innerHTML = '';
suggestions.forEach(function(item) {
var div = document.createElement('div');
div.classList.add('suggestion-item');
div.textContent = item;
suggestionsDiv.appendChild(div);
});
}
</script>
</body>
</html>
このフロントエンドコードでは、入力ボックスにOnInputイベントを使用します。ユーザーが文字を入力すると、 getSuggestions（）関数が呼び出され、リクエストはajaxを介してsearch_suggestions.phpに送信され、検索提案が取得されます。返された提案は、displaySuggestions（）関数を介してページに表示されます。
PHPとMySQLを使用して、 MySQLI_RESULT関数と組み合わせて、簡単なバックエンド検索提案インターフェイス関数を正常に実装しました。ユーザーがキーワードを入力すると、バックエンドはデータベースのデータに基づいて関連する提案を返し、フロントエンドはAjaxを介してこれらの提案を動的に表示します。この例は、 MySqli_Resultを使用してデータベースからデータを効率的に取得し、フロントエンドに戻す方法を示しています。
