微信小程序的开发之搜索功能

就直接贴代码啦~

wxml

<view class="weui-search-bar">
   <view class="weui-search-bar__form">
    <view class="weui-search-bar__box">
      <icon class="weui-icon-search_in-box" type="search" size="14">icon>
      <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容" value="{{wxSearchData}}" bindinput="wxSearchInput" bindconfirm="wxSearchConfirm" />
      <view class="weui-icon-clear" wx:if="{{wxSearchData.value.length > 0}}" bindtap="wxSearchClear">
        <icon type="clear" size="14">icon>
      view>
    view>
  view>
    <view class="weui-search-bar__cancel-btn" bindtap="back">
         <text data-key='back'>返回text>
     view>
view>

js

/**
   * 页面的初始数据
   */
  data: {
    lists: [],              // 接收搜索的内容
    wxSearchData: '',       // 输入的值
  },
/**
   * 搜索
   */
  wxSearchInput: function (value) {
    var that = this;
    if (value.detail.value.length > 0) {
      wx.request({
        url: '',
        data: {
          value: value.detail.value
        },
        header: { 'content-type': 'application/x-www-form-urlencoded' },
        method: 'POST',
        dataType: json,
        responseType: text,
        success: function (res) {
          if (res.code) {
            var data = that.data.lists;
            for (let i = 0; i < res.data.length; i++) {
                data.push(res.data[i]);
            }
            that.setData({
              wxSearchData: value.detail.value,
              lists: data
            })
          }
        },
        fail: function (res) { },
        complete: function (res) { },
      })
    }
  },

  /**
   * 监听软键盘确认键
   */
  wxSearchConfirm: function (e) {

  },

  /**
   * 返回
   */
  back: function (e) {
    wx:wx.navigateBack({
      delta: 1,
    })
  }