English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
このチュートリアルでは、PHPとAjaxを使用してリアルタイムMySQLデータベース検索機能を作成する方法を学びます。
AjaxとPHPを使用して、検索フィールドに文字を入力し始めたときに検索結果を表示するシンプルなリアルタイムデータベース検索機能を作成できます。
このチュートリアルでは、countriesテーブルを検索するリアルタイム検索ボックスを作成します。しかし、まずはそのテーブルを作成する必要があります。
MySQLデータベースでcountriesテーブルを作成するための以下のSQLクエリを実行してください。
CREATE TABLE countries ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL );
テーブルが作成された後、以下を使用してSQL INSERT文データをいくつか入力します。
テーブルの作成手順に不慣れであれば、以下のチュートリアルを確認してください。SQL CREATE TABLE文MySQLデータベースシステムでテーブルを作成するための文法の詳細については、以下のチュートリアルを参照してください。
今、ユーザーがリアルタイムで「countries」を検索できる簡単なWebインターフェースを作成するために進めましょう。"テーブルに利用可能な国/地域名前を入力してください。
「search」という名前のテーブルを作成します。-form.php”のPHPファイルに、以下のコードを挿入してください。
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>
<title>PHP MySQL データベースリアルタイム検索</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/*設定検索ボックスのスタイル */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/*変更時に入力値を取得 */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("backend-search.php", {term: inputVal}).done(function(data){
//ブラウザに返されたデータを表示
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
//結果項目をクリックすると、検索入力値を設定
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search country..." />
<div class="result"></div>
</div>
</html>検索入力の内容を変更したり、検索入力でキーボードイベントが発生した場合、jQueryコードが「backend」にAjaxリクエストを送信します。-「search.php」ファイル、このファイルは以下から国/地域関連するcountriesテーブルから検索ワードを検索したレコード。これらのレコードは後でjQueryによってインサートされます。<div>ブラウザに表示されます。
これは私たちの「backend」です-「search.php」ファイルのソースコードは、Ajaxリクエストで送信されたクエリ文字列に基づいてデータベースを検索し、結果をブラウザに送信します。
<?php
/* MySQLサーバー接続を試みます。MySQLが動作していると仮定しています
デフォルト設定のサーバー（ユーザー“root”、パスワードなし） */
$link = mysqli_connect("localhost", "root", "", "demo");
//接続を確認
if($link === false){
die("エラー：接続できません。" . mysqli_connect_error());
}
if(isset($_REQUEST["term"])){
//selectプレースホルダー処理文をプリパース
$sql = "SELECT * FROM countries WHERE name LIKE ?";
if($stmt = mysqli_prepare($link, $sql)){
//変数をプレースホルダー処理文にバインド
mysqli_stmt_bind_param($stmt, "s", $param_term);
//パラメータを設定
$param_term = $_REQUEST["term"] . '%';
// Attempt toプレースホルダー処理文を実行
if(mysqli_stmt_execute($stmt)){
$result = mysqli_stmt_get_result($stmt);
//結果集中の行数を確認
if(mysqli_num_rows($result) > 0){
//結果行を関連配列として取得
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>一致する記録が見つかりません</p>";
}
} else{
エコー「エラー：コマンド$sqlを実行できません」．．．mysqli_error($link);
}
}
//ステートメントを終了します
mysqli_stmt_close($stmt);
}
//接続を閉じます
mysqli_close($link);
?><?php
/* MySQLサーバー接続を試みます。MySQLが動作していると仮定しています
デフォルト設定のサーバー（ユーザー“root”、パスワードなし） */
$mysqli = new mysqli("localhost", "root", "", "demo");
//接続を確認
if($mysqli === false){
die("エラー：接続できません。" . $mysqli->connect_error);
}
if(isset($_REQUEST["term"])){
//selectプレースホルダー処理文
$sql = "SELECT * FROM countries WHERE name LIKE ?";
if($stmt = $mysqli->prepare($sql)){
//変数をプレースホルダー処理文にバインド
$stmt->bind_param("s", $param_term);
//パラメータを設定
$param_term = $_REQUEST["term"] . '%';
// プレースホルダー処理文の実行を試みます
if($stmt->execute()){
$result = $stmt->get_result();
//結果集中の行数を確認
if($result->num_rows > 0){
//結果行を関連配列として取得
while($row = $result->fetch_array(MYSQLI_ASSOC)){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>一致する記録が見つかりません</p>";
}
} else{
エコー「エラー：コマンド$sqlを実行できません」．．．mysqli_error($link);
}
}
//ステートメントを終了します
$stmt->close();
}
//接続を閉じます
$mysqli->close();
?><?php
/* MySQLサーバー接続を試みます。MySQLが動作していると仮定しています
デフォルト設定のサーバー（ユーザー“root”、パスワードなし） */
try{
$pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
//PDOのエラーモードを例外に設定します
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("エラー：接続不可。" . $e->getMessage());
}
//検索クエリを実行しようとします
try{
if(isset($_REQUEST["term"])){
//プリペアドステートメントを作成します
$sql = "SELECT * FROM countries WHERE name LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST["term"] . '%';
//パラメータをステートメントにバインドします
$stmt->bindParam(":term", $term);
//プリペアドステートメントを実行します
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>一致する記録が見つかりません</p>";
}
}
} catch(PDOException $e){
die("エラー：実行不可能 $sql. " . $e->getMessage());
}
//ステートメントを終了します
unset($stmt);
//接続を閉じます
unset($pdo);
?>SQL SELECT文とLIKE演算子を組み合わせて、countriesデータベーステーブル内で一致するレコードを検索します。以下のように、プリペアドステートメントを使用して、検索パフォーマンスを向上させ、防止するためにSQLインジェクション攻撃。
注意：SQL文を使用する前に、常にユーザー入力をフィルタリングおよび検証してください。ユーザー入力の特殊文字をエスケープして、SQLインジェクションを防ぐために合法なSQL文字列を作成するためにPHP mysqli_real_escape_string()関数を使用することもできます。