▶动态效果图◀
▶效果涉及到的input属性◀
focus Boolean false 获取焦点
bindinput EventHandle 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindinput相当于js中的键盘抬起事件
▶效果涉及到的小程序事件◀
tap 手指触摸后马上离开
实现思路：
1： input输入框，通过bindinput事件获取用户输入的值key:
2： 根据key去后台模糊查询所有的对象，将对象赋值给list，页面遍历展示
3： 展示的数据每一行绑定点击事件，点击后显示这行数据的详细信息
▶WXML◀
<view class="page">
<view class="page__bd">
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="搜索" maxlength='10' value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
<view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
<icon type="clear" size="14"></icon>
</view>
</view>
<label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<view class="weui-search-bar__text">搜索</view>
</label>
</view>
<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
</view>
<view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
<!-- 遍历List -->
<view class="weui-cell__bd" wx:for="{{list}}" wx:key="key">
<view class='list_name' data-id='{{item.deviceId}}' data-name='{{item.carNum}}' bindtap='btn_name'>
<label class='lab_name'>{{item.carNum}}</label>
</view>
</view>
</view>
</view>
</view>
<view class='msg-item' hidden='{{viewShowed}}'>
<image class='header-img' src="/img/car.png" ></image>
<view class='carNum'>{{carNum}}</view>
<view class='deviceId'>{{deviceId}}</view>
<image class='site-img' src="/img/site.png" ></image>
</view>
▶WXSS◀
.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;
}
/* 结果框样式 */
.msg-item {
width: 100%;
height: 150rpx;
border-bottom: 1rpx solid rgb(233, 233, 233);
position: relative;
left:0;
top:0;
overflow: hidden;
}
.header-img {
position: absolute;
width: 100rpx;
height: 100rpx;
left: 20rpx;
top: 30rpx;
border-radius: 10%;
}
.carNum {
position: absolute;
left: 150rpx;
top: 33rpx;
font-weight: 600;
font-size: 33rpx;
}
.deviceId {
position: absolute;
left: 150rpx;
bottom: 32rpx;
font-size: 70%;
color: rgb(127, 127, 127);
}
.site-img {
position: absolute;
width: 70rpx;
height: 70rpx;
right: 50rpx;
top: 40rpx;
border-radius: 10%;
}
app.wxss中引入weui.wxss
weui.wxss 下载地址 ： /Tencent/weui-wxss
▶ J S ◀
难点一：inputShowed、viewShowed两个变量
inputShowed变量控制第一层搜索框的显示和隐藏
viewShowed变量控制单个对象详细信息的显示与隐藏
难点二：inputTyping 函数
inputTyping ：监听键盘输入，获取用户输入的值，然后去后台查询，赋值给list
难点三：函数较多，其实每个函数里面的内容都比较简单，耐着头皮看几遍就理解了
Page({
data: {
// 搜索框状态
inputShowed: false,
//结果框状态
viewShowed: true,
// 搜索框值
inputVal: "",
//搜索渲染推荐数据
list: [],
//车辆数据
carNum: "",
deviceId: "",
},
// 显示搜索框
showInput: function () {
this.setData({
inputShowed: true
});
},
// 隐藏搜索框
hideInput: function () {
this.setData({
inputVal: "",
inputShowed: false
});
},
// 清除搜索框值
clearInput: function () {
this.setData({
inputVal: ""
});
},
// 获取输入框的值
inputTyping: function (e) {
var that = this;
//如果值为空，返回
if (e.detail.value == '') {
return;
}
that.setData({
viewShowed: true, //显示结果框
inputVal: e.detail.value //变量赋值
});
//console.log(this.data.inputVal);
wx.request({ //根据关键字发起请求
url: "http://localhost:8081/wpDeboServer/car/search.do",
data: {"key": e.detail.value },
method: 'GET',
header: {
'Content-type': 'application/json'
},
success: function (res) {
that.setData({ //设置结果集
list: res.data
})
}
});
},
// 获取选中推荐列表中的值
btn_name: function (res) {
console.log( res.currentTarget.dataset.name);
console.log(res.currentTarget.dataset.id);
this.setData({
inputVal: "", //清空结果
inputShowed: false,
viewShowed: false, //显示结果框
carNum: res.currentTarget.dataset.name, //赋值变量
deviceId: res.currentTarget.dataset.id
});
}
});
后台查询相关逻辑
▶Controller◀
@GetMapping("/search")
@ResponseBody
public ResponseEntity<List<Car>> getCarLikeName(@RequestParam("key") String key) {
try {
// 模糊查询已绑定车辆
List<Car> cars = carService.getCars(key);
return new ResponseEntity<List<Car>>(cars, HttpStatus.OK);
} catch (Exception e) {
e.printStackTrace();
}
return new ResponseEntity<List<Car>>(HttpStatus.INTERNAL_SERVER_ERROR);
}
▶Mapper语句◀
<select id="getCars" resultType="com.mote.pojo.Car">
SELECT car_num,device_id FROM debo_car WHERE car_num LIKE CONCAT('%', #{key}, '%')
</select>
页面设计参照：/qq_35695041/article/details/81481842
---------------------
作者：fly_鸡肉
来源：CSDN
原文：/qq_37936542/article/details/84945893
版权声明：本文为博主原创文章，转载请附上博文链接！
