Utilisez l'applet WeChat pour réaliser la fonction d'achèvement automatique du champ de recherche

Utilisez l'applet WeChat pour réaliser la fonction de complétion automatique du champ de recherche

Avec le développement de l'Internet mobile, l'applet WeChat est devenue un élément indispensable de la vie des gens. Dans les petits programmes, la fonction de recherche est l'une des exigences les plus courantes. Afin d’améliorer l’expérience utilisateur, la fonction de saisie semi-automatique du champ de recherche est un bon plus. Cet article explique comment utiliser l'applet WeChat pour implémenter la fonction de complétion automatique du champ de recherche et fournit des exemples de code spécifiques.

Tout d'abord, nous devons ajouter un composant de champ de recherche à la page du mini-programme pour que les utilisateurs puissent saisir des mots-clés de recherche. Dans le fichier wxml, nous pouvons utiliser le composant d'entrée pour implémenter le champ de recherche :

<view class="search-bar">
  <!-- 搜索图标 -->
  <image src="/images/search.png" mode="aspectFit"></image>
  <!-- 搜索输入框 -->
  <input class="input-box" placeholder="请输入关键词" bindinput="onInput" bindconfirm="onConfirm"></input>
</view>

Dans ce code, nous utilisons un composant image pour afficher l'icône de recherche, et un composant d'entrée pour implémenter le champ de recherche. Parmi eux, les attributs bindinput et bindconfirm sont respectivement liés aux fonctions de gestionnaire de l'événement d'entrée utilisateur et de l'événement de recherche de confirmation utilisateur.

Ensuite, nous devons écrire la fonction de traitement d'événement correspondante dans le fichier js correspondant. La première est la fonction de traitement des événements d'entrée de l'utilisateur onInput :

Page({
  data: {
    suggestions: []
  },
  onInput: function(event) {
    const value = event.detail.value;
    // 在此处发送搜索建议请求并更新 suggestions 数据
    this.setData({
      suggestions: suggestions // 替换为具体的搜索建议数据
    });
  }
})

Dans ce code, nous obtenons les mots-clés saisis par l'utilisateur via event.detail.value, envoyons ici une demande de suggestion de recherche, puis mettons à jour les données de suggestions. Les données de suggestions ici sont un tableau utilisé pour stocker les résultats des suggestions de recherche.

Vient ensuite le gestionnaire d'événements de recherche de confirmation de l'utilisateur onConfirm :

Page({
  data: {
    suggestions: []
  },
  onConfirm: function(event) {
    const value = event.detail.value;
    // 在此处进行搜索请求并跳转到搜索结果页
    wx.navigateTo({
      url: '/pages/searchResult/searchResult?keyword=' + value
    });
  }
})

Dans ce code, nous obtenons les mots-clés saisis par l'utilisateur via event.detail.value, et passons à la page des résultats de recherche ici. Le searchResult est la page de résultats de recherche que nous devons créer nous-mêmes, qui peut être personnalisée en fonction de nos propres besoins.

Enfin, nous devons styliser le champ de recherche et les résultats de recherche dans le fichier wxss correspondant :

.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}

.input-box {
  flex: 1;
  margin-left: 10px;
  border: none;
  background-color: transparent;
  font-size: 16px;
  color: #333333;
}

Dans ce code, nous avons des paramètres de style de base pour le champ de recherche et les résultats de recherche, qui peuvent être personnalisés en fonction de votre propre ajustement de style. est requis.

Grâce aux étapes ci-dessus, nous pouvons implémenter une simple fonction de saisie semi-automatique du champ de recherche de l'applet WeChat. Lorsque l'utilisateur saisit un mot-clé, le mini-programme envoie une demande pour obtenir des suggestions de recherche et met à jour les données de suggestions en temps réel. En même temps, lorsque l'utilisateur confirme la recherche, le mini-programme passe à la page des résultats de recherche et. passez-lui le mot-clé. Une telle expérience utilisateur améliorera considérablement l’efficacité et la commodité de la recherche des utilisateurs. J'espère que cet article sera utile à tout le monde !

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!