微信小程序开发之带搜索记录的搜索框

实现功能：点击搜索框，有搜索记录时以下拉菜单显示，点击下拉子菜单，将数据赋值到搜索框，点击搜索图标搜索，支持清空历史记录，可手动输入和清空查询关键字，

UI:

wxml：

<view class="ddclass" style="margin-left: 50rpx;z-index:80" hidden="{{!StorageFlag}}" style="z-index:100">
<view wx:for="{{sercherStorage}}" wx:key="item.id">
    <view class="liclass" style="color:#ec9e14;border-bottom:0;" id="{{item.id}}" bindtap="tapSercherStorage">
      <text style="width:100rpx">{{item.name}}</text>
    </view>
</view>
<view wx:if="{{sercherStorage.length!==0}}" style="text-align:center;" bindtap="clearSearchStorage">
    <text style="text-align:center;color:red;font-size:28rpx">清空历史记录</text>
</view>
</view>

wxss：

/*二级菜单外部容器样式*/
.ddclass {
position: absolute;
width: 100%;
margin-top: 10px;
left: 0;

}

/*二级菜单普通样式*/

.liclass {
font-size: 14px;
line-height: 34px;
color: #575757;
height: 34px;
display: block;
padding-left: 18px;
background-color: #fff;
border-bottom: 1px solid #dbdbdb;
}

/*二级菜单高亮样式*/

li.highlight {
background-color: #f4f4f4;
color: #48c23d;
}

js：

data:{

sercherStorage: [],

inputValue: "", //搜索框输入的值

StorageFlag: false, //显示搜索记录标志位

}

//获取输入框的输入信息
bindInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
},

//清楚输入框数据
clearInput:function(){
    this.setData({
      inputValue: ""
    })
},
//清楚缓存历史并关闭历史搜索框
clearSearchStorage: function () {
    wx.removeStorageSync('searchData')
    this.setData({ sercherStorage: [],
      StorageFlag: false, })
},
//点击缓存搜索列表
tapSercherStorage:function(e)
{
    var that = this;
    var index = parseInt(e.currentTarget.id);
    for (var j = 0; j < that.data.sercherStorage.length; j++) {
      if (j == index) {
        //将所选的搜索历史加到搜素框
        this.setData({
          inputValue: that.data.sercherStorage[j].name,
          StorageFlag: false,
        })
      }}
    if (this.data.inputValue != '') {
    //请求搜索记录
    }

},
//打开历史记录列表
openLocationsercher:function(e)
{
    this.setData({
      sercherStorage: wx.getStorageSync('searchData') || [],   //调用API从本地缓存中获取数据
      StorageFlag: true,
      listFlag: true,
    })
},
//添加搜索记录并搜索
setSearchStorage: function () {
    //let data;
    var that=this;
//let localStorageValue = [];
    if (this.data.inputValue != '') {
      //将搜索记录更新到缓存
      var searchData = that.data.sercherStorage;
      searchData.push({
        id: searchData.length,
        name: that.data.inputValue})
      wx.setStorageSync('searchData', searchData);
      that.setData({ StorageFlag: false,})

      //请求搜索
      /*wx.request({
        url: '',
        data: {SercherValue:that.data.inputValue,
            SercherTypeNum:that.data.SercherTypeNum,
            typeItem:that.data.typeItem },
        header: {},
        method: '',
        dataType: '',
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {},
      })*/
      //wx.navigateTo({
      // url: '../result/result'
     // })
      // console.log('马上就要跳转了！')
    } else {
      console.log('空白的你搜个jb')
    }
    // this.onLoad();
},

巴特西

微信小程序开发之带搜索记录的搜索框

最新文章

热门文章