WeChatアプレットの開発の検索機能
5509 ワード
コードをそのまま貼ります.
wxml
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,
})
}