【小程序】---- 實現搜索功能

一、功能描述：

在小程序中實現從列表頁跳轉到搜索頁做模糊查詢，要求在展示的搜索結果中，與輸入框所輸入的內容一致的部分要標紅。

 

二、解決思路：

引入 vant 的搜索組件，使用 parser 微信小程序富文本插件解析<style>標簽中的全局樣式。

// json文件

"usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "parser":"/components/parser.min/parser",
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
 }

// wxml文件

<van-search value="{{ inputVal }}" placeholder="{{ placeholder }}" show-action bind:cancel="hideInput" bind:change="inputTyping" focus="true" />

 

三、代碼實現：

// 輸入事件
  inputTyping: function (e) {
    // 初始總數據數組
    this.setData({
      allCustomersTemp: []
    })

    // 將傳遞來的所有數據賦值給allCustomersTemp參數
    this.setData({
      allCustomersTemp: JSON.parse(JSON.stringify(this.data.allCustomers))
    })

    // 初始查詢數組
    this.setData({
      searchResultTemp: []
    })

    // 最終查詢結果
    this.setData({
      searchResult: []
    })

    // 輸入的值
    this.setData({
      inputVal: e.detail
    })

    // 將總數據中存在輸入內容的數據存到查詢數組中
    this.data.allCustomersTemp.forEach(res => {
      if (res.indexOf(this.data.inputVal) > -1 && this.data.inputVal.length > 0) {
        this.data.searchResultTemp.push(res)
      }
    })

    // 更新查詢數組
    this.setData({
      searchResultTemp: this.data.searchResultTemp
    })

    // 設置輸入的值的正則，將查詢數組每個值中的與“輸入內容”一致的部分標紅，並存到最終結果searchResult中
    const regSearch = new RegExp(this.data.inputVal, "g")
    this.data.searchResultTemp.forEach(res => {
      const result = {}
      result.name = res
      result.customerName = res.replace(regSearch, "<font style='color:#E64340'>" + this.data.inputVal + "</font>")
      this.data.searchResult.push(result)
    })

    // 更新最終結果
    this.setData({
      searchResult: this.data.searchResult
    })
  }