PHP で WeChat アプレット検索ボックスのドロップダウン メニュー機能を実装する方法

PHP で WeChat ミニ プログラム検索ボックスのドロップダウン メニュー機能を実装する方法

WeChat ミニ プログラムの人気に伴い、ますます多くの企業が電子商取引に WeChat ミニ プログラムを使用し始めています。セールスとマーケティング。検索ボックスは WeChat アプレットの非常に重要なコンポーネントであり、ユーザーが必要な製品や情報をすばやく見つけるのに役立ちます。ドロップダウン メニュー機能を使用すると、ユーザーは検索結果をより便利にフィルタリングできます。この記事では、PHP を使用して WeChat アプレットの検索ボックスのドロップダウン メニュー機能を実装する方法を紹介します。

1. WeChat アプレット開発環境の設定

まず、PHP を使用して WeChat アプレットの検索ボックスのドロップダウン メニュー機能を実装する前に、設定が完了していることを確認する必要があります。 WeChat アプレット環境の開発。特定の構成手順については、WeChat 公式ドキュメントを参照してください。ここでは繰り返しません。

2. 検索ボックスのドロップダウン メニュー機能を実装します

1. データベースから検索キーワードを取得します

検索ボックスのドロップダウン メニューを実装するには、ダウンメニュー機能では、まずデータベースから検索キーワードを取得する必要があります。ここでは、PHP の mysqli 拡張機能を使用してデータベースに接続し、SELECT ステートメントを使用してテーブルからデータを取得できます。

以下はサンプル コードです:

$mysqli = new mysqli("localhost", "username", "password", "database");

if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: " . $mysqli->connect_error;
    exit();
}

$query = "SELECT keyword FROM search_table";
$result = $mysqli->query($query);

$keywords = array();

while ($row = $result->fetch_assoc()) {
    $keywords[] = $row["keyword"];
}

$mysqli->close();

上記のコードでは、「database」という名前のデータベースに接続し、「search_table」という名前のテーブルからすべての検索キーワードを取得します。取得した検索キーワードは「$keywords」という名前の配列に格納されます。

2. ユーザー入力に基づいて検索キーワードをフィルター処理する

次に、ユーザー入力に基づいて一致する検索キーワードをフィルター処理して、それらを返す必要があります。小さなプログラムを与えます。

以下はサンプル コードです:

$keyword = $_GET["keyword"];

$results = array();

foreach ($keywords as $k) {
    if (strpos($k, $keyword) !== false) {
        $results[] = $k;
    }
}

echo json_encode($results);

上記のコードでは、まず $_GET["keyword"] を使用して、ユーザーが入力した検索キーワードを取得します。次に、すべての検索キーワードをループし、strpos 関数を使用して、ユーザーが入力したキーワードが含まれるかどうかを判断します。含まれている場合は、結果配列「$results」に追加します。

最後に、「$results」配列を JSON 形式に変換し、ブラウザに出力します。

3. ミニ プログラムで検索ボックスのドロップダウン メニューを表示する

これで、ユーザー入力に一致する検索キーワードが取得されました。次に、これらの検索キーワードをミニ プログラムの検索ボックスのドロップダウン メニューに表示する必要があります。

以下はサンプル コードです:

<view class="dropdown" wx:if="{{ showDropdown }}">
    <view class="list" wx:for="{{ dropdownList }}" wx:key="index" bindtap="handleDropdownTap">
        {{ item }}
    </view>
</view>

上記のコードは、「dropdown」という名前のビュー コンポーネントを定義し、wx:if 変数と showDropdown 変数を使用して、それが表示されるかどうかを制御します。 showDropdown 変数が true の場合、ドロップダウン メニューが表示されます。

ビュー コンポーネントでは、wx:for 変数と DropdownList 変数を使用してドロップダウン メニューの各項目をループしてレンダリングし、bindtap を使用してドロップダウン メニューの各項目のクリック イベントをバインドします。

ミニ プログラムの JS ファイルでは、PHP インターフェイスを呼び出すことで、検索ボックスのドロップダウン メニューのデータを取得できます。

以下はサンプル コードです:

onInput: function(e) {
    var keyword = e.detail.value;

    if (keyword.length > 0) {
        wx.request({
            url: "http://localhost/search.php?keyword=" + keyword,
            success: function(res) {
                var list = res.data;

                if (list.length > 0) {
                    this.setData({ 
                        showDropdown: true,
                        dropdownList: list 
                    });
                }
            }.bind(this)
        });
    }
}

上記のコードは、「onInput」という名前のイベント処理関数を定義し、e.detail.value を使用して、検索でユーザーが入力したコンテンツを取得します。箱 。

ユーザーが入力したコンテンツの長さが 0 より大きい場合、wx.request メソッドを呼び出して PHP インターフェイスを呼び出し、検索ボックスのドロップダウン メニューのデータを取得します。

データの取得に成功したら、showDropdown を true に設定し、取得したデータを DropdownList に設定して、検索ボックスのドロップダウン メニューを表示できるようにします。

3. 概要

上記の手順により、PHP を使用して WeChat アプレット検索ボックスのドロップダウン メニュー機能を簡単に実装できます。もちろん、具体的な実装プロセスは、実際のニーズに応じて調整および最適化する必要があります。この記事が皆様のお役に立てれば幸いです、読んでいただきありがとうございます。

以上がPHP で WeChat アプレット検索ボックスのドロップダウン メニュー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。