Comment implémenter la fonction de menu déroulant du champ de recherche de l'applet WeChat en PHP

Comment implémenter la fonction de menu déroulant du champ de recherche du programme WeChat Mini en PHP

Avec la popularité des programmes WeChat Mini, de plus en plus d'entreprises commencent à utiliser les programmes WeChat Mini pour les ventes et le marketing du commerce électronique. Le champ de recherche est un composant très important de l'applet WeChat, qui peut aider les utilisateurs à trouver rapidement les produits et les informations dont ils ont besoin. La fonction de menu déroulant permet aux utilisateurs de filtrer les résultats de recherche plus facilement. Cet article explique comment utiliser PHP pour implémenter la fonction de menu déroulant du champ de recherche de l'applet WeChat.

1. Configurer l'environnement de développement de l'applet WeChat

Tout d'abord, avant de commencer à utiliser PHP pour implémenter la fonction de menu déroulant du champ de recherche de l'applet WeChat, nous devons nous assurer que nous avons configuré l'environnement de développement de l'applet WeChat. Pour les étapes de configuration spécifiques, veuillez vous référer à la documentation officielle de WeChat et ne seront pas répétées ici.

2. Implémentez la fonction de menu déroulant du champ de recherche

1. Obtenez les mots-clés de recherche à partir de la base de données

Afin d'implémenter la fonction de menu déroulant du champ de recherche, nous devons d'abord obtenir les mots-clés de recherche à partir de la base de données. . Ici, nous pouvons utiliser l'extension mysqli de PHP pour nous connecter à la base de données et obtenir les données de la table à l'aide des instructions SELECT.

Ce qui suit est un exemple de code :

$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();

Dans le code ci-dessus, nous nous connectons à la base de données nommée "database" et obtenons tous les mots-clés de recherche de la table nommée "search_table". Les mots-clés de recherche obtenus seront stockés dans un tableau nommé "$keywords".

2. Filtrer les mots-clés de recherche en fonction des entrées de l'utilisateur

Ensuite, nous devons filtrer les mots-clés de recherche correspondants en fonction des entrées de l'utilisateur et les renvoyer à l'applet.

Ce qui suit est un exemple de code :

$keyword = $_GET["keyword"];

$results = array();

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

echo json_encode($results);

Dans le code ci-dessus, nous utilisons d'abord $_GET["keyword"] pour obtenir le mot-clé de recherche saisi par l'utilisateur. Ensuite, nous parcourons tous les mots-clés de recherche et utilisons la fonction strpos pour déterminer si les mots-clés saisis par l'utilisateur sont inclus. S'il est inclus, ajoutez-le au tableau de résultats "$results".

Enfin, nous convertissons le tableau "$results" au format JSON et l'envoyons au navigateur.

3. Affichez le menu déroulant du champ de recherche dans le mini programme

Maintenant, nous avons obtenu les mots-clés de recherche qui correspondent à la saisie de l'utilisateur. Ensuite, nous devons afficher ces mots-clés de recherche dans le menu déroulant du champ de recherche du mini programme.

Ce qui suit est un exemple de code :

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

Le code ci-dessus définit un composant de vue nommé "dropdown" et utilise les variables wx:if et showDropdown pour contrôler s'il est affiché. Lorsque la variable showDropdown est vraie, le menu déroulant s'affichera.

Dans le composant d'affichage, nous utilisons les variables wx:for et dropdownList pour parcourir le rendu de chaque élément dans le menu déroulant, et utilisons bindtap pour lier l'événement de clic de chaque élément dans le menu déroulant.

Dans le fichier JS du mini programme, on peut récupérer les données dans le menu déroulant du champ de recherche en appelant l'interface PHP.

Voici un exemple de code :

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)
        });
    }
}

Le code ci-dessus définit une fonction de gestionnaire d'événements nommée "onInput" et utilise e.detail.value pour obtenir ce que l'utilisateur a entré dans le champ de recherche.

Lorsque la longueur du contenu saisi par l'utilisateur est supérieure à 0, nous appelons la méthode wx.request pour appeler l'interface PHP afin d'obtenir les données dans le menu déroulant du champ de recherche.

Après avoir obtenu avec succès les données, nous définissons showDropdown sur true et dropdownList sur les données obtenues, afin que le menu déroulant du champ de recherche puisse être affiché.

3. Résumé

Grâce aux étapes ci-dessus, nous pouvons facilement utiliser PHP pour implémenter la fonction de menu déroulant du champ de recherche de l'applet WeChat. Bien entendu, le processus de mise en œuvre spécifique doit encore être ajusté et optimisé en fonction de vos besoins réels. J'espère que cet article sera utile à tout le monde, merci d'avoir lu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!