小程序搜索功能（模糊查询）

功能：在搜索界面，搜索输入的字符，如果有匹配，就会显示出来。

wxml















取消





data-name='{
{item.carNum}}' bindtap='btn_name'>

{
{item.carNum}}











{
{item.carNum}}
{
{item.deviceId}}



试驾
解绑







wxss：（注意：引入了全局的框架WeUI）

.searchbar-result{
margin-top: 0;
font-size: 14px;
}
/* 搜索列表名称 */
.list_name{
position: relative;
width: 100%;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #ddd;
}
/* 列表名称 */
.lab_name{
position: absolute;
left: 30rpx;
}
/* serch-index */
/* 隐藏滚动条 */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.msg-item {
width: 100%;
height: 145rpx;
border-bottom: 1rpx solid rgb(233, 233, 233);
position: relative;
left:0;
top:0;
overflow: hidden;
}
.msg {
position: absolute;
width: 100%;
height: 150rpx;
left:0;
top:0;
z-index: 100;
background-color: #FFF;
}
.header-img {
position: absolute;
width: 100rpx;
height: 100rpx;
left: 20rpx;
top: 30rpx;
border-radius: 10%;
}
.site-img {
position: absolute;
width: 70rpx;
height: 70rpx;
right: 50rpx;
top: 40rpx;
border-radius: 10%;
}
.user-name {
position: absolute;
left: 150rpx;
top: 33rpx;
font-weight: 600;
font-size: 33rpx;
}
.msg-text {
position: absolute;
left: 150rpx;
bottom: 32rpx;
font-size: 70%;
color: rgb(127, 127, 127);
}
.msg-menu {
position: absolute;
width: 100%;
height: 150rpx;
left:0;
top:0;
z-index: 0;
}
.menu-delete {
position: absolute;
width: 150rpx;
height: 148rpx;
top:1rpx;
right: 0;
background-color: rgb(255, 58, 50);
color:#FFF;
text-align: center;
line-height:150rpx;
}
.menu-mark {
position: absolute;
width: 200rpx;
height: 148rpx;
top:1rpx;
right: 150rpx;
background-color: rgb(200, 199, 205);
color:#FFF;
text-align: center;
line-height:150rpx;
}
/* 滑动效果 */
.inner.del {
position: absolute;
width: 300rpx;
height: 148rpx;
top: 1rpx;
right: -300rpx;
color: #fff;
text-align: center;
line-height: 130rpx;
}
.draw {
border-right: 1px solid #fff;
display: inline-block;
width: 140rpx;
height: 142rpx;
background: #d6cdcd;
}
.delete {
display: inline-block;
width: 140rpx;
height: 142rpx;
background: #fd9903;
}
/* end */
/* 搜索 */
.weui-search-bar__input{
height: 72rpx;
}
.weui-icon-search_in-box{
top:22rpx;
}
.weui-search-bar__cancel-btn{
line-height:70rpx;
}
.weui-icon-clear{
top:4rpx;
}


js

var app = getApp()
Page({
data: {
// 搜索框状态
inputShowed: true,
//显示结果view的状态
viewShowed: false,
// 搜索框值
inputVal: "",
//搜索渲染推荐数据
catList: [],
btnWidth: 300, //删除按钮的宽度单位
startX: "", //收支触摸开始滑动的位置
},
onLoad: function () {
var that = this;
//初始化界面
that.initEleWidth();
},
// 隐藏搜索框样式
hideInput: function () {
this.setData({
inputVal: "",
inputShowed: false
});
},
// 清除搜索框值
clearInput: function () {
this.setData({
inputVal: ""
});
},
// 键盘抬起事件2
inputTyping: function (e) {
console.log(e.detail.value)
var that = this;
if (e.detail.value == ''){
return;
}
that.setData({
viewShowed: false,
inputVal: e.detail.value
});
wx.request({
url: app.globalData.root +"car/search.do",
data: { "openid": app.globalData.openid, "carNum": e.detail.value },
method: 'GET',
header: {
'Content-type': 'application/json'
},
success: function (res) {
that.setData({
carList: res.data
})
}
});
},
// 获取选中推荐列表中的值
btn_name: function (res) {
console.log(res.currentTarget.dataset.index, res.currentTarget.dataset.name);
console.log(res.currentTarget.dataset.index, res.currentTarget.dataset.id);
var that = this;
that.hideInput();
that.setData({
viewShowed: true,
carNum: res.currentTarget.dataset.name,
deviceId: res.currentTarget.dataset.id
});
},
// index-serch
//滑动效果
touchS: function (e) {
if (e.touches.length == 1) { //触摸屏上只有一个触摸点
this.setData({
//设置触摸起始点水平方向位置
//clientX:距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴
startX: e.touches[0].clientX
});
}
},
touchM: function (e) {
if (e.touches.length == 1) { // 一个触摸点
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.data.startX - moveX;
//按钮
var btnWidth = this.data.btnWidth;
var txtStyle = "";
if (disX == 0 || disX <0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
txtStyle = "left:0px";
} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
txtStyle = "left:-" + disX + "px";
if (disX >= btnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "left:-" + btnWidth + "px";
}
}
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
//设置该项向左偏移的样式,并消除其他项的偏移样式
var list = this.data.carList;
for (var ix in list) {
ix == index ? list[ix].txtStyle = txtStyle : list[ix].txtStyle = "";
}
//更新列表的状态
this.setData({
carList: list
});
}
},
touchE: function (e) {
if (e.changedTouches.length == 1) { //一个触摸点
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束，手指移动的距离
var disX = this.data.startX - endX;
var btnWidth = this.data.btnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = disX > btnWidth / 2 ? "left:-" + btnWidth + "px" : "left:0px";
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
//设置偏移的样式
var list = this.data.carList;
list[index].txtStyle = txtStyle;
//更新列表的状态
this.setData({
carList: list
});
}
},
//获取元素自适应后的实际宽度
getEleWidth: function (w) {
var real = 0;
try {
var res = wx.getSystemInfoSync().windowWidth;
var scale = (750 / 2) / (w / 2); //以宽度750px设计稿做宽度的自适应
real = Math.floor(res / scale);
return real;
} catch (e) {
return false;
// Do something when catch error
}
},
initEleWidth: function () {
var btnWidth = this.getEleWidth(this.data.btnWidth);
this.setData({
btnWidth: btnWidth
});
},
//点击解绑
unBind: function (e) {
var that = this;
console.log(e.currentTarget.dataset.name)
//获取列表中要删除项的下标
wx.showModal({
title: '提示',
content: '是否确认解绑',
success(res) {
if (res.confirm) {
//解绑
wx.request({
url: app.globalData.root + "car/unBind.do",
data: {
"openid": app.globalData.openid,
"carNum": e.currentTarget.dataset.name
},
method: 'GET',
header: {
'Content-type': 'application/json'
},
success: function (res) {
that.getCars(app.globalData.openid);
}
});
}
}
})
},
//点击试驾
tryDriver: function (e) {
var that = this;
var index = e.currentTarget.dataset.index;
var list = that.data.carList;
if (list[index].state == 5)
return;
wx.showModal({
title: '提示',
content: '是否确认试驾',
success(res) {
if (res.confirm) {
//试驾
wx.request({
url: app.globalData.root + "car/driver.do",
data: {
"openid": app.globalData.openid,
"carNum": e.currentTarget.dataset.name
},
method: 'GET',
header: {
'Content-type': 'application/json'
},
success: function (res) {
if (res.data == 0) {
wx.showToast({
title: '车辆维修尚未结束、不可试驾',
icon: 'none',
})
return;
}
//切换图标
for (var ix in list) {
if (ix == index)
list[ix].state = 5;
}
//更新列表的状态
that.setData({
carList: list
});
}
});
}
}
})
},
//事件处理函数
navmap: function (e) {
wx.navigateTo({
url: '../site/site?deviceId=' + e.currentTarget.dataset.id
})
},
//显示车辆状态
carState: function (e) {
wx.navigateTo({
url: '../state/state?carNum=' + e.currentTarget.dataset.car
})
},
});


原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq群聊来问我：473819131.