一般來說如果一個網站有站內搜尋，可以更方便使用者找到想要的資訊，但如果要增進使用者體驗，有什麼方法可以讓簡單的搜尋變得更加美好？沒錯！那就是運用前端技術 AJAX 來達到邊打字邊搜尋資料庫的效果！後端程式 PHP 則負責將獲得的搜尋文字做資安處理，也就是將特殊符號轉譯，最後與 SQL 查詢語法一起送給 MySQL 資料庫，資料庫就會即時回傳資料，就能即時在同個網頁獲得搜尋結果而不需要換頁，這樣的效果早就在很多網站使用了！不過如果像我這樣的小型網站也能採用，這一定會非常的酷炫！

AJAX 可以透過 jQuery 載入，只要透過 jQuery 就能使用這項技術，我們整個即時搜尋系統只要兩個檔案：一個 .html 靜態網頁與另一個 .php 的動態網頁，前者是搜尋框與 AJAX 發揮實力的地方，後者是利用 PHP 幫助我們去資料庫中撈我們要的資訊，所以當然 MySQL 資料庫也是要有相對應的資料才完整囉！

學習這篇文章的技術，需要對 HTML、PHP、jQuery（JavaScript 函式庫，內含 AJAX）、MySQL（資料庫管理系統）與 SQL（資料庫查詢語法）有一定的了解，所以基礎真的很重要，這樣學習才能暢行無阻！一起加油吧！

▲「PHP & AJAX & MySQL 即時搜尋系統」實際運作截圖。

⌨ 完整原始碼提供與備註：

這邊提供完整原始碼與備註，提供給您參考！

📄 資料庫建立：php.sql

請在 MySQL 資料庫中建立名為 php 的資料庫，並新增名為 search 的資料表。

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE DATABASE IF NOT EXISTS `php` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE `php`;

DROP TABLE IF EXISTS `search`;
CREATE TABLE `search` (
  `post_id` bigint(20) NOT NULL,
  `post_title` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_context` longtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_date` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `search` (`post_id`, `post_title`, `post_context`, `post_date`) VALUES
(1, '萌芽網頁是誰創立的？', '萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！萌芽站長唷！', '2019-06-18 16:03:15'),
(2, '萌芽系列網站何時誕生的？', '2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！2011年的9月由萌芽站長創立唷！', '2019-06-18 16:04:15'),
(3, '萌芽網頁的網址是？', 'https://mnya.tw/\r\n，不然呢？', '2019-06-18 16:05:00');


ALTER TABLE `search`
  ADD PRIMARY KEY (`post_id`);


ALTER TABLE `search`
  MODIFY `post_id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

📄 搜尋結果：search.html

這個頁面就是搜尋框與搜尋結果的顯示網頁，運用 AJAX 技術即時跟 search.php 要資料。

<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP & AJAX & MySQL 即時搜尋系統</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    搜尋：<input type="text" name="search_text" id="search_text" placeholder="請輸入搜尋文字" class="form-control" /> （標題、內文都可搜尋）
    <br><br>
    <div id="search_result"></div>

    <script>
        $(document).ready(function () {

            load_data();

            function load_data(query) {
                $.ajax({
                    url: "search.php",
                    method: "GET",
                    data: {
                        s: query
                    },
                    success: function (data) {
                        $('#search_result').html(data);
                    }
                });
            }
            $('#search_text').keyup(function () {
                var search = $(this).val();
                if (search != '') {
                    load_data(search);
                } else {
                    load_data();
                }
            });
        });
    </script>

</body>

</html>

📄 抓資料庫的資料：search.php

將 search.html 的資料送入後做處理，跟 MySQL 要資料並顯示搜尋結果或整個資料表的資料，這邊通常會放入一些資訊安全機制。

<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>

<body>

<?php

// 定義資料庫資訊
$DB_NAME = "php";
$DB_USER = "root";
$DB_PASS = "mysql";
$DB_HOST = "localhost";

// 連接 MySQL 資料庫伺服器
$con = mysqli_connect($DB_HOST, $DB_USER, $DB_PASS);
if (empty($con)) {
    print mysqli_error($con);
    die("資料庫連接失敗！");
    exit;
}

// 選取資料庫
if (!mysqli_select_db($con, $DB_NAME)) {
    die("選取資料庫失敗！");
}

// 設定連線編碼
mysqli_query($con, "SET NAMES 'UTF-8'");

// 顯示表頭
echo "<table>
<tr>
<th>文章編號</th>
<th>文章標題</th>
<th>文章內文</th>
<th>發表時間</th>
</tr>";

if (isset($_GET['s'])) { // 如果有搜尋文字顯示搜尋結果

    $s = mysqli_real_escape_string($con, $_GET['s']);
    $sql = "SELECT * FROM search WHERE post_title LIKE '%" . $s . "%' OR post_context LIKE '%" . $s . "%'";
    $result = mysqli_query($con, $sql);

    // SQL 搜尋錯誤訊息
    if (!$result) {
        echo ("錯誤：" . mysqli_error($con));
        exit();
    }

    // 搜尋無資料時顯示「查無資料」
    if (mysqli_num_rows($result) <= 0) {
        echo "<tr><td colspan='4'>查無資料</td></tr>";
    }

    // 搜尋有資料時顯示搜尋結果
    while ($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['post_id'] . "</td>";
        echo "<td>" . $row['post_title'] . "</td>";
        echo "<td>" . $row['post_context'] . "</td>";
        echo "<td>" . $row['post_date'] . "</td>";
        echo "</tr>";
    }

} else { // 如果沒有搜尋文字顯示所有資料

    $sql = "SELECT * FROM search";
    $result = mysqli_query($con, $sql);

    if (!$result) {
        echo ("錯誤：" . mysqli_error($con));
        exit();
    }

    while ($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['post_id'] . "</td>";
        echo "<td>" . $row['post_title'] . "</td>";
        echo "<td>" . $row['post_context'] . "</td>";
        echo "<td>" . $row['post_date'] . "</td>";
        echo "</tr>";
    }

}

echo "</table>";

mysqli_close($con); // 連線結束

?>

</body>

</html>

💬 備註：

mysqli_real_escape_string(connection,escapestring);

▲ 這個函數可以幫助我們將特殊字元做轉換，以免造成駭客的攻擊，前者填入 MySQL 連接資訊，後者放入要處理的字串。

贊助廣告 ‧ Sponsor advertisements

《上一篇》PHP：從 MySQL 資料庫中取得資料表的筆數與資料

《下一篇》PHP 取整數與大小寫轉換函數

萌芽站長

您好，我是萌芽系列網站（Mnya Series Website）的站長&創始人，可以稱呼我「萌芽站長」。我的興趣與專長有登山、觀察地形、攝影、旅遊、網頁設計＆架設＆經營、動畫製作、圖片處理、資料彙整等。有任何問題或建議請至萌芽論壇發表。網站業務、商業合作的聯絡方式在「關於本站 → 團隊介紹 → 站長介紹」，很高興認識您！請多指教！

PHP & AJAX & MySQL 即時搜尋系統、邊打字邊搜尋資料庫

⌨ 完整原始碼提供與備註：

📄 資料庫建立：php.sql

📄 搜尋結果：search.html

📄 抓資料庫的資料：search.php

💬 備註：

留言區 / Comments

萌芽站長

熱門文章

近期文章

頁面

其他操作