小程序開發之搜索、自動補全

▶動態效果圖◀

 

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