Verwenden Sie das WeChat-Applet, um die automatische Vervollständigungsfunktion des Suchfelds zu realisieren

Verwenden Sie das WeChat-Applet, um die automatische Vervollständigungsfunktion des Suchfelds zu realisieren.

Mit der Entwicklung des mobilen Internets ist das WeChat-Applet zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. In kleinen Programmen gehört die Suchfunktion zu den sehr häufigen Anforderungen. Um das Benutzererlebnis zu verbessern, ist die Autovervollständigungsfunktion des Suchfelds ein gutes Plus. In diesem Artikel wird erläutert, wie Sie mit dem WeChat-Applet die automatische Vervollständigungsfunktion des Suchfelds implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir der Miniprogrammseite eine Suchfeldkomponente hinzufügen, damit Benutzer Suchbegriffe eingeben können. In der WXML-Datei können wir die Eingabekomponente verwenden, um das Suchfeld zu implementieren:

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

In diesem Code verwenden wir eine Bildkomponente, um das Suchsymbol anzuzeigen, und eine Eingabekomponente, um das Suchfeld zu implementieren. Unter diesen sind die Attribute bindinput und bindconfirm an die Handlerfunktionen des Benutzereingabeereignisses bzw. des Benutzerbestätigungssuchereignisses gebunden.

Als nächstes müssen wir die entsprechende Ereignisverarbeitungsfunktion in die entsprechende js-Datei schreiben. Die erste ist die Benutzereingabe-Ereignisverarbeitungsfunktion onInput:

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

In diesem Code erhalten wir die vom Benutzer eingegebenen Schlüsselwörter über event.detail.value, senden hier eine Suchvorschlagsanforderung und aktualisieren dann die Vorschlagsdaten. Bei den Vorschlagsdaten handelt es sich hier um ein Array, das zum Speichern von Suchvorschlagsergebnissen verwendet wird.

Als nächstes kommt der Ereignishandler für die Benutzerbestätigungssuche onConfirm:

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

In diesem Code erhalten wir die vom Benutzer eingegebenen Schlüsselwörter über event.detail.value und springen hier zur Suchergebnisseite. Das searchResult ist die Suchergebnisseite, die wir selbst erstellen müssen und die an unsere eigenen Bedürfnisse angepasst werden kann.

Abschließend müssen wir das Suchfeld und die Suchergebnisse in der entsprechenden WXSS-Datei formatieren:

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

In diesem Code haben wir grundlegende Stileinstellungen für das Suchfeld und die Suchergebnisse, die entsprechend Ihren eigenen Stilanpassungen angepasst werden können sind erforderlich.

Durch die oben genannten Schritte können wir eine einfache Funktion zur automatischen Vervollständigung des WeChat-Applet-Suchfelds implementieren. Wenn der Benutzer ein Schlüsselwort eingibt, sendet das Miniprogramm eine Anfrage, um Suchvorschläge zu erhalten und die Vorschlagsdaten in Echtzeit zu aktualisieren. Wenn der Benutzer die Suche bestätigt, springt das Miniprogramm gleichzeitig zur Suchergebnisseite Übergeben Sie das Schlüsselwort an ihn. Eine solche Benutzererfahrung wird die Sucheffizienz und den Komfort der Benutzer erheblich verbessern. Ich hoffe, dieser Artikel ist für alle hilfreich!

Das obige ist der detaillierte Inhalt vonVerwenden Sie das WeChat-Applet, um die automatische Vervollständigungsfunktion des Suchfelds zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!