微信小程序搜索框自动补全功能

▶动态效果图◀

▶效果涉及到的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}}">
          
          <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
---------------------
作者：fly_鸡肉
来源：CSDN
原文：https://blog.csdn.net/qq_37936542/article/details/84945893
版权声明：本文为博主原创文章，转载请附上博文链接！

微信小程序搜索框自动补全功能

猜你喜欢