PHP開発：検索キーワードプロンプトと自動補完機能の実装方法-PHPチュートリアル-php.cn

PHP開発：検索キーワードプロンプトと自動補完機能の実装方法

WBOY

リリース： 2023-09-21 13:04:01

オリジナル

1668 人が閲覧しました

PHP開発：検索キーワードプロンプトと自動補完機能の実装方法

PHP 開発: 検索キーワードのプロンプトと自動補完機能の実現

今日のインターネット時代において、検索エンジンは人々が情報を入手するための重要なチャネルの 1 つとなっています。ウェブサイト開発において、検索機能の重要性は自明の理です。ユーザーエクスペリエンスと検索結果を向上させるために、検索キーワードプロンプトと自動補完機能を実装することは、非常に価値のある必要な開発タスクです。この記事では、PHP開発における検索キーワードプロンプトや自動補完機能の実装方法と具体的なコード例を紹介します。

検索キーワードプロンプトとは、ユーザーが検索キーワードを入力すると、ユーザーの入力に基づいて関連する検索候補がリアルタイムで表示されることを意味します。オートコンプリート機能は、ユーザー入力時に既存の検索キーワードまたはデータを自動的に入力し、より便利な検索エクスペリエンスを提供します。

検索キーワードプロンプトと自動補完機能を実装するには、次の手順が必要です。

データベースとデータテーブルを確立する
まず、データベースとデータを作成する必要があります。検索キーワードを格納するテーブル。 PHPMyAdmin などのツールを使用して作成できます。
ユーザーが入力したキーワードを取得する
検索ボックスでは、ユーザーの入力イベントをリッスンし、入力されたキーワードを処理のためにバックグラウンドに送信する必要があります。 JavaScript を使用してこの機能を実装できます。

<script>
  $(document).ready(function(){
    $("#search").keyup(function(){
      var keyword = $(this).val();
      $.ajax({
        url: "suggest.php",
        method: "POST",
        data:{keyword:keyword},
        success:function(data){
          $("#suggest").html(data);
        }
      });
    });
  });
</script>

ログイン後にコピー

上記のコードでは、jQuery ライブラリを使用して検索ボックスの keyup イベントをリッスンし、AJAX を使用してユーザーが入力したキーワードを処理のために assign.php ファイルに送信します。。そして返された結果をページのsuggest要素に表示します。

検索キーワードの処理
次に、ユーザーが入力したキーワードを処理し、関連する検索候補を返すために、suggest.php ファイルを記述する必要があります。このファイルでは、データベースに接続し、関連する検索キーワードをクエリする必要があります。

<?php
  $keyword = $_POST["keyword"];
  
  // 连接数据库
  $conn = new mysqli("localhost", "root", "", "数据库名");
  if($conn->connect_error){
    die("数据库连接失败：" . $conn->connect_error);
  }
  
  // 查询相关的搜索建议
  $sql = "SELECT keyword FROM keywords WHERE keyword LIKE '$keyword%'";
  $result = $conn->query($sql);
  if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
      echo "<li>" . $row["keyword"] . "</li>";
    }
  }
  $conn->close();
?>

ログイン後にコピー

上記のコードでは、まず、AJAX を通じて送信されたキーワードを取得します。次に、データベースに接続し、キーワード接頭辞に一致する検索候補をクエリします。最後に、echo ステートメントを使用して、検索候補をフロントエンドページに返します。

オートコンプリート機能の実装
オートコンプリート機能を実装するには、ユーザーが検索候補をクリックしたときに、検索ボックスに候補テキストを入力する必要があります。

<script>
  $(document).ready(function(){
    $(document).on("click", "#suggest li", function(){
      var keyword = $(this).text();
      $("#search").val(keyword);
      $("#suggest").html("");
    });
  });
</script>

ログイン後にコピー

上記のコードでは、jQuery の on イベントを使用して、ユーザーが検索候補をクリックし、検索ボックスに候補テキストを入力したときにイベントをリッスンします。

上記の手順により、検索キーワードのプロンプトと自動補完機能を実装できます。これにより、ユーザーの検索エクスペリエンスが大幅に向上し、検索結果の精度が最適化されます。

参考文献: