小程序篇1-1：搜索框输入关键字、词检索；点击取消恢复默认状态

当光标点击搜索框输入（后台数据）关键字时，点击输入框后面的×恢复初始状态。
代码如下
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: '' });
  }

})