小程序开发之搜索、自动补全

▶动态效果图◀

 

▶效果涉及到的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