微信小程序最全搜索功能

主要功能：

搜索
点击x号清空输入框内容
点击取消返回上一页面
搜索数据为空提示
历史记录
清空历史记录
点击历史记录搜索
点击搜索列表带参数返回上一页面

代码如下：

<!--pages/carType/search/search.wxml--><!-- 搜索栏 -->
<view class="search-wrap"><input class="search" bindinput="search" value='{{inputValue}}'></input><image src="/images/search.png" class="searchImg"></image><image src="/images/cancel.png" class="closeImg" bindtap='close' wx:if="{{closeImg}}"></image><view class="cancel" bindtap='cancel'>取消</view>
</view><!-- 搜索列表 -->
<view class="search-content">
<!-- 历史搜索 --><view class="historywrap" wx:if="{{history}}"><view class="historyTitle"><view>历史搜索</view><image src="/images/cancel.png" bindtap='cancelHistory'></image></view><view class="historyList"><view wx:for="{{historyData}}" bindtap='searchHistory' data-name="{{item}}">{{item}}</view></view></view><!-- 暂无数据组件 --><noData wx:if="{{noData}}"><view>暂无数据</view></noData><!-- 搜索列表 --><view class="content" wx:for="{{carList}}" wx:key="{{item.id}}"><view class="title">{{item.name}}</view><view class="carList" wx:for="{{item.models}}" wx:for-item="itemName" wx:key="{{itemName.id}}" bindtap='selectCar' data-name="{{item.name}}"><text style="color:red" data-name="{{item.name}}">{{item.name}}</text><text data-name="{{item.name}}">{{itemName.name}}</text></view></view>
</view>

/* pages/carType/search/search.wxss */page{background-color: #f2f2f2;
}
.search-wrap{width:100%;display: flex;align-items: center;position: relative;background-color: #fff;padding-bottom: 40rpx;box-sizing: border-box;overflow: hidden;
}
.search-wrap .search{border:1rpx solid rgba(204, 204, 204, 0.4);width:500rpx;height:60rpx;background-color: #f2f2f2;margin-left:30rpx;padding-left:40px;font-size: 12px;color:#000;border-radius: 50rpx;
}
.search-wrap .searchImg{width:35rpx;height:35rpx;position: absolute;left:50rpx;top:17rpx;
}
.search-wrap .closeImg{width:25rpx;height:25rpx;position: absolute;right:156rpx;top:19rpx;z-index: 999;
}
.search-wrap .cancel{font-size: 16px;color:#666;margin-left:30rpx;
}
/* 搜索列表 */
.search-content{width:100%;
}
.content{width:100%;padding:0rpx 20rpx;box-sizing: border-box;background-color: #fff;color:#000;
}
.title{width:100%;height:60rpx;margin:0 auto;font-size: 26rpx;font-weight: bold;text-align: center;line-height: 60rpx;border-bottom: 1rpx solid #eee;
}
.carList{width:100%;height:60rpx;line-height: 60rpx;font-size: 24rpx;border-bottom: 1rpx solid #eee;
}
.carList text{margin-right: 30rpx;
}/* 历史记录 */
.historywrap{width:100%;margin-top: 40rpx;
}
.historyTitle{width:100%;padding:0rpx 40rpx;box-sizing: border-box;color:#ccc;font-size: 24rpx;display: flex;justify-content: space-between;
}
.historyTitle image{width:25rpx;height:25rpx;
}
.historyList{width:100%;margin-top: 20rpx;background-color: #fff;padding:20rpx 40rpx;box-sizing: border-box;display: flex;flex-wrap: wrap;
}
.historyList view{font-size: 24rpx;color:#333;padding:2rpx 8rpx;border:1rpx solid #ccc;border-radius: 6rpx;margin:10rpx;
}

// pages/carType/search/search.js//获取应用实例
const app = getApp()
const $http = require('../../../utils/http.js') //引入请求函数Page({/*** 页面的初始数据*/data: {inputValue:'', //输入框value值noData:false, //暂无数据carList:[],//搜索列表history:false, //搜索记录historyData:[], //历史记录列表},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thiswx.getStorage({ //获取历史记录缓存key: 'history', success(res) {console.log(res.data)if(res.data == ''){that.setData({history:false})}else{that.setData({historyData: res.data,history:true})}}})},//搜索框搜索事件search:function(e){var that = thisif (e.detail.value == ''){ //输入框value为空that.setData({noData:false,carList:'',closeImg:false,history:true})}else{ //输入框value不为空that.setData({closeImg: true,history:false})$http.post('my/search_vehicles',{ //请求搜索接口search: e.detail.value}).then(res=>{var resObj = res.dataif(resObj.code == 1){//请求成功console.log(resObj.data)if (resObj.data){that.setData({noData: false,carList: resObj.data.brandList})}else{that.setData({noData:true})}}else{console.log('请求失败',resObj.msg)}}).catch(err=>{console.log('异常回调',err)})}},//点击X取消输入框内容事件close: function () {var that = thisthat.setData({inputValue: '',carList:'',noData:false,closeImg: false,history:true})},//取消事件cancel: function () {var that = thiswx.switchTab({url: '/pages/carType/carType'})},//选择车型事件selectCar:function(e){var that = thisconsole.log(e.target.dataset)if (that.data.historyData.indexOf(e.target.dataset.name) > -1) {//包含该元素} else{that.data.historyData.push(e.target.dataset.name)}wx.setStorage({ //添加缓存key: 'history',data: that.data.historyData,success:function(){wx.reLaunch({url: '/pages/carType/carType'})}})},//清空历史搜索cancelHistory:function(){var that =thiswx.removeStorage({key: 'history',success(res) {that.setData({history:false})}})},//点击历史搜索searchHistory:function(e){var that = thisthat.setData({inputValue:e.target.dataset.name,history:false,closeImg:true})$http.post('url', { //请求搜索接口search: e.target.dataset.name}).then(res => {var resObj = res.dataif (resObj.code == 1) {//请求成功console.log(resObj.data)if (resObj.data) {that.setData({noData: false,carList: resObj.data.brandList})} else {that.setData({noData: true})}} else {console.log('请求失败', resObj.msg)}}).catch(err => {console.log('异常回调', err)})},})

前端进阶精选：点此去

微信小程序最全搜索功能相关推荐

微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
微信小程序实现历史搜索功能（h5同理）
1.实现效果 2.实现原理将数据存在storage中. wx.setStorageSync('search_history', JSON.stringify(this.data.list)) 取数组 ...
微信小程序开发实现搜索功能
对于搜索都是会有一些需要的,所以搜索页面还是可以复用的.主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml 点击页面中黄色的inp ...
微信小程序如何实现搜索功能
思路: 1.先对input框绑定个search方法进行搜索 2.在js中写sarch方法,利用wx.request查找数据,success成功之后开始查找自己要的数据. 3.根据input框的输入值且 ...
微信小程序使用键盘搜索功能
记录下. 1.name='search';//search内容随便写 2.bindconfirm='shop_search_function'://这个变量是js函数 3.confirm-type=' ...
微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
微信小程序实现换肤功能
参考链接: (1)微信小程序实现换肤功能 https://www.jb51.net/article/136445.htm (2)微信小程序实现换肤功能 https://blog.csdn.net/qq ...
家用电脑设置成小程序服务器,电脑微信小程序设置全屏的方法是什么
电脑微信小程序设置全屏的方法是什么方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便 ...
低成本免服务器微信小程序源码多功能集合搭建
现如今在线副业已经成为一种趋势,越来越多的人选择副业作为起步.小程序凭借不占内存.无论前期投入还是后期维护,成本都较低:如果你想副业来赚钱,选择小程序是非常不错的选择,有很多人可能会问,我不会做小程序 ...

微信小程序最全搜索功能

微信小程序最全搜索功能

微信小程序最全搜索功能相关推荐

最新文章

热门文章