实现效果如下

聚焦显示历史记录

关联历史记录

注意点

结构上需要将input框和下面的historyList作为一个整体，可自行控制展示历史记录的规格；
使用微信缓存API wx.getStorageSync 和wx.setStorageSync，处理历史记录的存储时记得去重

WXML结构

 <view class="search-box"><image class="search-icon" src="./images/searchIcon.png" ></image><input class="hd-search" placeholder="请输入搜索关键词" bindconfirm="searchMsg"bindfocus="showHistory"bindblur="clearList"bindinput="findHistory"value="{{inputText}}"focus="{{isFocus}}"></input><!--历史记录!--><view class="search-history-item" wx:for="{{searchList}}" wx:key="index" bindtap="reSearch"data-text="{{item}}">{{item}}</view></view>

WXSS

.search-box {width: 700rpx;position: absolute;padding-left: 80rpx;padding-right: 80rpx;top: 340rpx;left: 50%;z-index: 2;transform: translateX(-50%);align-items: center;font-family: PingFangSC-Regular;font-size: 28rpx;border-radius: 60rpx;background-color: #fff;box-sizing: border-box;box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(218,224,229,1);
}
.hd-search {width: 100%;height: 80rpx;
}
.search-icon {width: 40rpx;height: 40rpx;position: absolute;top: 20rpx;left: 22rpx;
}
.search-history-item {height: 60rpx;overflow: hidden;
}

JS

data: {searchList:[],inputText:'',isFocus:false},searchMsg(option){// option.detail.valueconst that = this// 回车值入缓存if(option.detail.value != ''){try {let value = wx.getStorageSync('history')if(value){// 最多缓存20条记录that.data.searchList = JSON.parse(value).slice(0,20)}//去重let index = this.data.searchList.indexOf(option.detail.value)if(index > -1){this.data.searchList.splice(index,1)}that.data.searchList.unshift(option.detail.value)wx.setStorageSync('history', JSON.stringify(that.data.searchList))}catch(e){console.log(e)}// 搜索成功后跳转页面，并清空searchListthis.clearList()}},// 聚焦且无输入值时显示所有历史记录，有输入值时显示包含其的所有历史记录showHistory(option){// option.detail.value//获取缓存数据const that = thisif(!option.detail.value){try {let value = wx.getStorageSync('history')if (value) {that.setData({// 只展示5个searchList:JSON.parse(value).slice(0,5)})}} catch (e) {}}else {this.findHistory('',option.detail.value)}},//点击历史记录进行填充搜索reSearch(e){// e.currentTarget.dataset.textthis.setData({inputText:e.currentTarget.dataset.text,// 这个聚焦方法会出现闪动的情况isFocus:true})},clearList(){this.setData({searchList:[]})},// 查找搜索历史记录findHistory(e,param){// e.detail.valueconst that = thislet temp = []let p = param ? param : e.detail.valueif(p){try{let value = wx.getStorageSync('history')if(value){JSON.parse(value).forEach((item,index)=>{if(item.indexOf(p) > -1){temp.unshift(item)}})}}catch(e){console.log(e)}}else {temp = JSON.parse(wx.getStorageSync('history')).slice(0,5)}that.setData({searchList:temp})},

微信小程序 input框实现搜索历史记录相关推荐

微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序 input框进行双向绑定
在微信小程序的规则中,input标签中的数据为单向绑定,无法像Vue框架中的v-model直接进行input的双向绑定. 下面有一种思路来解决双向绑定这个思路. 1.利用bindinput记录下inp ...
微信小程序input框在某些手机上获取数据失败
因为加了有数据为空不允许提交的判断,测试的时候发现有的手机总是提示有数据为空,不能提交, 测试之后发现是填写手机号的input框type类型为number,然后写了三个框分别获取数据, type类型分 ...
uniapp开发微信小程序input框限制输入
input框输入手机号的约束 <input @input="onlyNum" class="inp" v-model="phone" ...
微信小程序input框输入值校验
1.定义正则方法 // 校验输入价格的正则方法checkInputText: function (text) {var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g; / ...
微信小程序input框只能输入小数/正整数
官方组件说明:https://developers.weixin.qq.com/miniprogram/dev/component/input.html 给type不同的值就好,以下示例不满足则需要I ...
微信小程序input框输入值获取
提交表单时获取输入框的值 wxml <view><form bindsubmit="submi ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...

微信小程序 input框实现搜索历史记录

实现效果如下

聚焦显示历史记录

关联历史记录

注意点

WXML结构

WXSS

JS

微信小程序 input框实现搜索历史记录相关推荐

最新文章

热门文章