Use WeChat applet to realize the automatic completion function of search box

Use WeChat applet to realize the automatic completion function of search box

With the development of mobile Internet, WeChat applet has become an indispensable part of people's lives. In small programs, search function is one of the very common requirements. In order to improve the user experience, the auto-complete function of the search box is a good plus. This article will introduce how to use the WeChat applet to implement the automatic completion function of the search box and provide specific code examples.

First, we need to add a search box component to the mini program page for users to enter search keywords. In the wxml file, we can use the input component to implement the search box:

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

In this code, we use an image component to display the search icon, and an input component to implement the search box. Among them, the bindinput and bindconfirm attributes are bound to the handler functions of the user input event and the user confirmation search event respectively.

Next, we need to write the corresponding event processing function in the corresponding js file. The first is the user input event processing function onInput:

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

In this code, we obtain the keywords entered by the user through event.detail.value, and send a search suggestion request here, and then update suggestions data. The suggestions data here is an array used to store search suggestion results.

Next is the user confirmation search event processing function onConfirm:

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

In this code, we obtain the keywords entered by the user through event.detail.value, and add them here Jump to the search results page. The searchResult is the search results page we need to create ourselves, which can be customized according to our own needs.

Finally, we need to set the style of the search box and search results in the corresponding wxss file:

.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 this code, we have made basic changes to the search box and search results. Style settings, you can adjust the style according to your own needs.

Through the above steps, we can implement a simple WeChat applet search box auto-complete function. When the user enters a keyword, the mini program will send a request to obtain search suggestions and update the suggestions data in real time. At the same time, when the user confirms the search, the mini program will jump to the search results page and pass the keyword to it. Such a user experience will greatly improve users’ search efficiency and convenience. Hope this article is helpful to everyone!

The above is the detailed content of Use WeChat applet to realize the automatic completion function of search box. For more information, please follow other related articles on the PHP Chinese website!