当光标点击搜索框输入(后台数据)关键字时,点击输入框后面的×恢复初始状态。
代码如下
wxml:
<!-- 搜索框页面 -->
<view class='search'>
<!-- 头部搜索框 -->
<view class='frame'>
<input type='text' placeholder='搜索' placeholder-class='holder' bindblur='searchWells' id='search' value='{{name}}' ></input>
<view class='btn' bindtap="resetSearch">
<image src='../../../../../images/icon/cancel.png'></image>
</view>
</view>
<!-- 关键词检索提示 -->
<block wx:if="{{result.length > 0}}">
<block wx:for="{{result}}" wx:key="key">
<view class="item">
<image src='../../../../../images/icon/ss.png' class='soso'></image>
<view class="name">
{{item}}</view>
</view>
</block>
</block>
wxss:
/* 搜索框 */
.search{
width: 100%;
height: 600px;
padding: 0px;
margin: 0px;
font-family: "Microsoft YaHei";
}
.frame{
width: 95%;
height: 30px;
position: relative;
background: #eeeeee;
margin: 0px auto;
border-radius: 5px;
}
.frame input{
width: 80%;
height: 100%;
}
.holder{
color: #999;
font-size: 13px;
margin-left: 10px;
}
.btn{
width: 20px;
height: 20px;
position: absolute;
top: 6px;
right: 10px;
}
.btn image{
width: 100%;
height: 100%;
}
/* 关键词检索提示 */
.item{
width: 100%;
padding-left: 10px;
padding-right: 10px;
font-size: 15px;
padding-top: 10px;
display: flex;
flex-direction: row;
}
.name{
margin-bottom: 10px;
width: 80%;
margin-left: 10px;
}
.soso{
width: 20px;
height: 20px;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
result: [],
name: ''
},
loadGoods: function () { //输入关键字检索提示
var hints = ['小', '小耳朵', '小手心', '小温暖', '小小']; //数组
return hints;
},
searchWells: function (e) {
var name = e.detail.value;
var val = this.loadGoods(); //定义一个变量名
var result = new Array();
if (name != '') { //判断用户输入搜素不为空时执行下面的代码
for (var i = 0; i < val.length; i++) {
var good = val[i];
if (good.indexOf(name) > -1) {
result.push(good);
}
}
}
this.setData({ result: result });
},
//当用户输入字符后点击恢复默认状态
resetSearch: function () {
var result = new Array();
this.setData({ result: result, name: '' });
}
})