PHP と UniApp は、自動データ補完と検索候補を実装します。

PHP と UniApp で自動データ補完と検索候補を実現

インターネットの発展に伴い、検索エンジンはユーザーが情報を取得する上で重要な役割を果たしています。その中で、自動データ補完機能と検索候補機能により、ユーザーはキーワードを入力する際に​​より正確な候補を得ることができ、ユーザーの検索エクスペリエンスが向上します。この記事では、PHPとUniAppを使ってデータのオートコンプリート機能や検索サジェスト機能を実装する方法を紹介します。

まず、ユーザーに検索してもらいたいキーワードを含むデータセットを準備する必要があります。このデータセットは、データベースまたはキーワードを含む配列に保存できます。この記事では、データセットがテーブル名 keywords とフィールド名 keyword でデータベース内のテーブルに保存されていると仮定します。

次に、検索候補のデータを提供するインターフェイスを PHP で記述する必要があります。まず、データベースに接続する必要があります。以下は PHP コードの例です。

<?php
// 连接到数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "your_database_name";
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 获取用户输入的关键词
$keyword = $_GET["keyword"];

// 查询数据库，获取匹配的关键词
$sql = "SELECT keyword FROM keywords WHERE keyword LIKE '%$keyword%'";
$result = $conn->query($sql);

// 将查询结果转化为一个包含关键词的数组
$keywords = array();
while($row = $result->fetch_assoc()) {
    array_push($keywords, $row["keyword"]);
}

// 返回搜索建议的数据
echo json_encode($keywords);

// 关闭数据库连接
$conn->close();
?>

次に、ユーザーが入力したキーワードを受信し、バックエンド インターフェイスにリクエストを送信して検索候補データを取得するコンポーネントを UniApp に記述する必要があります。以下は UniApp コードの例です:

<template>
  <div>
    <input type="text" v-model="keyword" @input="getSuggestions" />
    <ul>
      <li v-for="suggestion in suggestions" :key="suggestion">{{ suggestion }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      suggestions: []
    };
  },
  methods: {
    getSuggestions() {
      // 向后端接口发送请求获取搜索建议的数据
      uni.request({
        url: 'http://localhost/get_suggestions.php',
        data: {
          keyword: this.keyword
        },
        success: (res) => {
          // 更新搜索建议的数据
          this.suggestions = res.data;
        }
      });
    }
  }
};
</script>

上記のコードでは、ユーザーが入力したキーワードを v-model ディレクティブを通じて keyword 変数にバインドします。 , ユーザーがキーワードを入力すると、getSuggestions メソッドが自動的に呼び出されます。このメソッドはバックエンド インターフェイスにリクエストを送信し、suggestions 変数を更新して検索候補データを更新します。フロントエンド インターフェイスでは、suggestions のデータが v-for コマンドを通じてページに表示されます。ユーザーは検索候補を直接クリックして検索を完了できます。

最後に、上記のコンポーネントを UniApp に導入し、ページで使用する必要があります。以下は UniApp ページ コードの例です。

<template>
  <div>
    <h1>数据的自动补全与搜索建议</h1>
    <AutoComplete />
  </div>
</template>

<script>
import AutoComplete from '@/components/AutoComplete'

export default {
  components: {
    AutoComplete
  }
}
</script>

上記の手順により、データの自動補完と検索候補機能を実現できます。ユーザーがキーワードを入力すると、一致する単語の候補が自動的に取得され、ユーザーが選択できるようにページに表示されます。ユーザーが提案された単語を選択すると、検索操作を実行できます。

まとめると、この記事ではPHPとUniAppを使ってデータの自動補完や検索候補機能を実現する方法を紹介します。バックエンド インターフェイスとフロントエンド コンポーネントを作成することで、より正確な検索候補をユーザーに簡単に提供し、ユーザーの検索エクスペリエンスを向上させることができます。この記事が、PHP と UniApp を使用してデータのオートコンプリート機能や検索候補機能を実装する開発者にとって役立つことを願っています。

以上がPHP と UniApp は、自動データ補完と検索候補を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。