微信小程序如何实现搜索功能

在页面search.wxml中，定义一个input输入框以及搜索的点击按钮，分别为它们绑定点击事件handleInputChange()和handleSearch()的事件，同时在它们的下面定义搜索的列表，代码如下所示：

<view class="search-header">
  <input class="search-input"  bindtap="handleInputChange" />
  <view class="search-btn" bindtap="handleSearch">搜索</view>
</view>

<view>
  <view wx:for="{{list}}" wx:key="{{index}}" class="item" id="{{item.id}}" bindtap="handleItemTap">
    <view>{{ item }}</view>
    <view class="item-message">{{ item.message }}</view>
  </view>
</view>

在逻辑文件search.js中，在data中存放list的数据，为空数组，存放搜索列表的数据，同时定义staticData，在里面定义inputValue，里面为空字符串，是input输入框的值，代码如下所示：

data: {
  list: []
},
staticData: {
  inputValue: ""
}

在search.js的onLoad()生命周期函数中，调用请求数据的函数getSearchResult()，这样在一进入页面的时候就会获取到所有的数据，不过由于并没有关键字keyword，需要传空字符串，代码如下所示：

onLoad() {
    this.getSearchResult("");
 },
getSearchResult(keyword) {
 wx.request({
      url: 'xxxxxx',
      data: {
        keyword: this.staticData.inputValue
      },
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded' 
      },
      success: this.getSearchResultSucc.bind(this)
 })
},

在search.js中，定义一个响应成功后的函数getSearchResultSucc()，判断响应的数据是否存在。如果存在通过this.setData()方法将响应后的数据赋值给list，如果不存在，list仍然为空数组，代码如下所示：

getSearchResultSucc(res) {
    // console.log(res)
    if (res.data.ret) {
      const result = res.data.data;
      this.setData({
        list: result
      })
    } else {
      this.setData({
        list: []
      })
    }
}

在search.js中，定义handleInputChange()函数，这个函数也是input输入框绑定的函数，传入事件对象e，然后通过e.detail.value赋值给staticData的inputValue，代码如下所示：

handleInputChange(e) {
   this.staticData.inputValue = e.detail.value;
}

在search.js中，定义handleSearch()函数，这个函数也是之前搜索按钮所绑定的函数，在这个里面重新发起一次请求，携带keyword关键字发起请求，代码如下所示：

handleSearch (keyword) {
  this.getSearchResult(keyword)
}

如果想要点击在搜索以后显示的列表，可以在列表中绑定handleItemTap()事件，传入事件对象e，通过 e.currentTaret.id去获取到点击的id，然后再通过 wx.navigateTo()方法跳转到相应的详情页，代码如下所示：

handleItemTap(e) {
    wx.navigateTo({
      url: '/pages/detail/detail?id=' + e.currentTaret.id
    })
}

旧城tk

发布了146 篇原创文章 · 获赞 34 · 访问量 3万+

私信关注

微信小程序如何实现搜索功能

猜你喜欢