▶动态效果图◀
▶效果涉及到的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 下载地址 : https://github.com/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>
页面设计参照:https://blog.csdn.net/qq_35695041/article/details/81481842