微信小程序带清除按钮和搜索记录的实时搜索页面

近期开发小程序遇到个需求，需要在Input框中加一个清除按钮清除input框中的内容以及实时搜索

页面效果（未输入内容）：

有内容时样式:

wxml代码：

<view class='container'><view  class='search_input'><icon type="search" size="15" class='search_icon' /><input  placeholder='请输入关键字' placeholder-class="search_placeholder" value="{{inputValue}}" bindinput="blur"></input><image src='../public_imgs/del.png' class='cancle_btn' wx:if="{{inputValue}}" bindtap='clean'></image></view><view class='flex space_between align_center search_title'><view>搜索历史</view><image src='../public_imgs/delete.png' wx:if="{{list.length!=0}}"  catchtap='remove'></image></view><view class='list'><view class="key" wx:if="{{list.length==0}}">暂无搜索记录</view><view class="key" wx:for="{{list}}" wx:key="" bindtap='searchName' data-value='{{item}}'>{{item}}</view></view><view  class='search_result' wx:if="{{inputValue}}"><view wx:for="{{resultList}}" wx:key="" bindtap='detail' data-id='{{item.projectCode}}'>{{item.projectName}}</view><view class='no_more' wx:if="{{resultList.length==0}}">暂无相关内容</view></view>
</view>

wxss代码：

.key{width:auto;height:48rpx;line-height: 48rpx;background:rgba(246,246,246,1);border-radius:30rpx;padding: 5rpx 30rpx;font-weight:300;color: #4A4A4A;float:left;margin-right: 10rpx;margin-bottom: 30rpx;margin-left: 10rpx;
}.list{padding-left: 10rpx;
}.search_title{margin: 40rpx 20rpx 40rpx 30rpx;
}
.search_title image{width: 48rpx;height: 48rpx;
}.search_result{position:fixed;left:0;right:0;top:80rpx;bottom:0;background:#ffffff;font-size: 26rpx;overflow: scroll;padding-bottom: 30rpx;
}.search_result>view{width: 690rpx;border-bottom:1rpx solid rgba(239,239,239,1);margin: auto;padding:30rpx 0;color: #070707;font-weight:400;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.search_result>view:nth-last-child(1){border-bottom: none;
}.cancle_btn{position: absolute;right: 40rpx;top:15rpx;width: 48rpx;height: 48rpx;z-index: 999;
}.search_input {width: 620rpx;height: 72rpx;background: rgba(247, 247, 247, 1);border-radius: 36rpx;padding-left: 80rpx;margin: auto;font-size: 24rpx;
}.search_input input{line-height:72rpx;height:72rpx;width:500rpx;
}.search_icon {position: absolute;left: 60rpx;top: 23rpx;
}.search_placeholder {color: #cacaca;
}.cancle_btn{position: absolute;right: 40rpx;top:15rpx;width: 48rpx;height: 48rpx;z-index: 999;
}.container {padding: 0 0 100rpx;font-size: 29rpx;overflow: scroll;
}.no_more {text-align: center;font-weight: 400;color: rgba(107, 107, 107, 1);margin-bottom: 30rpx;
}.flex {display: flex;
}.space_between {justify-content: space-between;
}.space_around {justify-content: space-around;
}.align_center {align-items: center;
}

js代码:

var network = require("../../utils/network.js");Page({/*** 页面的初始数据*/data: {list: [],inputValue: null,resultList:[]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var _this = this;wx.getStorage({key: 'historySearch',success(res) {_this.setData({list: res.data})}})},blur: function (e) {this.setData({inputValue: e.detail.value})this.search();},search:function(){var _this = thisnetwork.requestLoading('projectAppList', { projectName: this.data.inputValue }, '', function (res) {if (res.respState == 'S') {_this.setData({resultList: res.dtos})}}, function () {wx.showToast({title: '搜索失败',icon: 'none'})})},save: function () {var list = this.data.list;if (list.indexOf(this.data.inputValue) == -1 & this.data.inputValue != '') {list.push(this.data.inputValue);}this.setData({list: list})wx.setStorage({key: 'historySearch',data: list})},searchName: function (e) {this.setData({inputValue: e.currentTarget.dataset.value})this.search();},remove: function () {var _this = this;wx.showModal({title: '提示',content: '确认清空所有记录?',success(res) {if (res.confirm) {wx.removeStorage({key: 'historySearch',success() {_this.setData({list: []})}})} else if (res.cancel) {console.log('用户点击取消')}}})},clean:function(){var _this=thissetTimeout(function () {_this.setData({inputValue: '',})},100)},detail: function (e) {this.save();wx.navigateTo({url: '../projectDetail/projectDetail?id=' + e.currentTarget.dataset.id,})}

network.js：

var cryptData = require("cryptData.js");var app = getApp();
const HOST = app.globalData.HOST;function request(url, params, success, fail) {this.requestLoading(url, params, "", success, fail)
}
// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {var ocryptData = cryptData.cryptData(params, url)wx.showNavigationBarLoading()if (message != "") {wx.showLoading({title: message,})}wx.request({url: HOST + '/gateWay',data: JSON.stringify(ocryptData),header: {//'Content-Type': 'application/json''content-type': 'application/x-www-form-urlencoded'},method: 'post',success: function(res) {//console.log(res.data)wx.hideNavigationBarLoading()if (message != "") {wx.hideLoading()}if (res.statusCode == 200) {success(res.data.params)if (res.data.params.respState == 'F' && res.data.params.respShow=='Y'){wx.showToast({title: res.data.params.respMsg,icon:'none',duration:2000})  }if (res.data.params.respCode =='TK-INVALID'){wx.reLaunch({url: '../authorize/authorize',})}} else {fail()}},fail: function(res) {wx.hideNavigationBarLoading()if (message != "") {wx.hideLoading()}fail()},complete: function(res) {wx.stopPullDownRefresh()},})
}
module.exports = {request: request,requestLoading: requestLoading
}

遇到问题：未收起键盘情况下，安卓清除input框内容失败，收起键盘再点清除则没问题

解决方案延迟清除：

  clean:function(){var _this=thissetTimeout(function () {_this.setData({inputValue: '',})},100)},

微信小程序带清除按钮和搜索记录的实时搜索页面相关推荐

微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
微信小程序退出按钮退出方式
微信小程序退出按钮退出方式 1,只能跳转到 tabBar配置的页面 wx.switchTab({url:''../xxx/xxx}) 2.返回上一级页面 (delta:返回的页面数,如果delta大于 ...
微信小程序 -- 原生JS集成腾讯IM实时聊天/实时音视频(踩坑及心得)
原生JS集成腾讯IM实时聊天/实时音视频对话功能一.腾讯IM集成前期准备实例创建及初始化 IM登录收发消息二.腾讯音视频实时互动跑通demo 三.同时集成即时通讯IM 和音视频直播的坑 ...
微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序开发一个小型商城（七、支付页面）
上一篇:微信小程序开发一个小型商城(六.购物车页面) 在这里,基本上是与购物车页面相似的: 在从购物车页面跳转过来,在购物车界面对购物车商品会进行合法判断,是否有收货人的信息和是否存在商品,而在订单页 ...
微信小程序获取上一页路由获取从哪个页面跳转进来的
微信小程序获取上一页路由获取从哪个页面跳转进来的 var pages = getCurrentPages(); let prevpage = pages[pages.length - 2];//上一 ...
微信小程序集成腾讯IM，实现实时音视频通话，1V1聊天
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
Google 在搜索建议、实时搜索和本地搜索上的小改进
Google官方博客介绍了三个最近网页搜索的小改进. 首先,全部50种语言和170个域名的Google本地化首页样式都已经根Google.com保持一致,包括将搜索建议的文字加粗,将"手气不 ...

微信小程序带清除按钮和搜索记录的实时搜索页面

微信小程序带清除按钮和搜索记录的实时搜索页面相关推荐

最新文章

热门文章