ホームページ > バックエンド開発 > PHPチュートリアル > PHP と Ajax: オートコンプリート提案エンジンの構築

PHP と Ajax: オートコンプリート提案エンジンの構築

WBOY
リリース: 2024-06-02 20:39:11
オリジナル
479 人が閲覧しました

PHP と Ajax を使用してオートコンプリート提案エンジンを構築します: サーバー側スクリプト: Ajax リクエストを処理し、提案を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実践例: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

PHP 与 Ajax:构建一个自动完成建议引擎

Ajax を使用した PHP: オートコンプリート提案エンジンの構築

はじめに

オートコンプリート提案エンジンは、ユーザーが入力フィールドで提案を見つけるのに役立つ便利なツールです。これは、検索フィールド、住所フィールド、その他のテキスト入力領域でよく使用されます。この記事では、PHP と Ajax を使用してオートコンプリート提案エンジンを構築する方法を説明します。

サーバーサイドスクリプト

まず、Ajax リクエストを処理し、提案を返すための PHP スクリプトが必要です。 autocomplete.php というファイルを作成し、次のコードを追加します: autocomplete.php 的文件并添加以下代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<?php

// 获取查询字符串

$query = $_GET['query'];

 

// 连接到数据库

$conn = new mysqli("localhost", "my_user", "my_password", "my_db");

 

// 准备 SQL 查询

$stmt = $conn->prepare("SELECT suggestion FROM suggestions WHERE suggestion LIKE ?");

 

// 绑定查询参数

$stmt->bind_param("s", "%$query%");

 

// 执行查询

$stmt->execute();

 

// 获取结果

$result = $stmt->get_result();

 

// 逐行读取结果并将其转换为 JSON

$suggestions = array();

while ($row = $result->fetch_assoc()) {

    $suggestions[] = $row['suggestion'];

}

$json = json_encode($suggestions);

 

// 返回 JSON 响应

header("Content-Type: application/json");

echo $json;

?>

ログイン後にコピー

客户端脚本

接下来,我们需要一个客户端脚本来发送 Ajax 请求并显示建议。创建一个名为 autocomplete.js 的文件并添加以下代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// 获取搜索输入元素

const searchInput = document.getElementById("search-input");

 

// 添加事件监听器以在按键盘键时触发

searchInput.addEventListener("keyup", function(event) {

    // 获取查询字符串

    const query = searchInput.value;

 

    // 如果查询字符串为空,则显示建议

    if (query.length > 0) {

        // 创建 Ajax 请求

        const xhr = new XMLHttpRequest();

        xhr.open("GET", "autocomplete.php?query=" + query, true);

        xhr.onload = function() {

            // 解析 JSON 响应

            const suggestions = JSON.parse(xhr.responseText);

 

            // 显示建议

            // ... (由你实现)

        };

        xhr.send();

    }

});

ログイン後にコピー

实战案例

为了使用自动完成建议引擎,你可以在 HTML 页面中包含上述脚本文件并为 search-input 元素添加标识符。在 autocomplete.php 脚本中,你需要将数据库连接参数更改为与你的数据库设置匹配。

运行引擎

autocomplete.phpautocomplete.js 文件上传到你的服务器。访问包含 search-inputrrreee

🎜クライアント スクリプト🎜🎜🎜 次に、Ajax リクエストを送信して提案を表示するクライアント スクリプトが必要です。 autocomplete.js というファイルを作成し、次のコードを追加します: 🎜rrreee🎜🎜実践例🎜🎜🎜 オートコンプリート提案エンジンを使用するには、HTML ページに上記のスクリプト ファイルを含めることができます。 search-input 要素を指定すると、識別子が追加されます。 autocomplete.php スクリプトでは、データベース設定に一致するようにデータベース接続パラメータを変更する必要があります。 🎜🎜🎜エンジンを実行🎜🎜🎜 autocomplete.phpautocomplete.js ファイルをサーバーにアップロードします。 search-input 要素を含む HTML ページにアクセスし、クエリ文字列の入力を開始します。クエリに一致する候補が表示されるはずです。 🎜

以上がPHP と Ajax: オートコンプリート提案エンジンの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート