搜索框模糊查询--关键字查询，不区分大小写并且设备高亮显示

搜索框模糊查询–关键字查询，不区分大小写

1. 一个输入框和一个搜索按钮

<template>
  <div slot="footer" class="mybtn">
    <p class="searchBody">
      <Input v-model="waterCoversName" class="searchInput"/>
      <Button class="searchBtn" type="primary" @click="searchLampPole" >搜索</Button>
    </p>
  </div>
</template>

2. 设置样式

<style lang="less" scoped>
  .mybtn{
    padding:0 10px;
    .searchBody{
      .searchInput{
        width: 60%;
        vertical-align: top;
        /deep/ input{
            background-color: rgba(0, 0, 0, 0.2);
            color:#fff;
        }
      }
      .searchBtn{
        width: 35%;
        margin-left: 3%;
      }
    }
    button{
      margin-bottom: 10px;
    }
  }
</style>

3. 获取数据

    getFacilityByType (type) { // 根据分组类型查询组下所有设施
      this.$ajax({
        method: 'get',
        url: '/portal/group/facility/get/' + type,
        data: {},
        $simple: true
      }).then(res => {
        if (res.data.length > 0) {
          this.facilityList = res.data.map(t => {
            let status = t.devices[0] ? this.deviceStatusListImg[t.devices[0].abstract_status] : 'damage' // 向地图中插入每个标记时设置根据标记是否故障在标记右上角显示不同颜色
            return {
              ...t,
              lng: t.location.points[0].longitude,
              lat: t.location.points[0].latitude,
              src: this.iconOnMap[type],
              icon: this.iconOnMap[type],
              color: getColorByStatus(status),
              state: getColorByStatus(status)
            }
          })
          this.$map.cover.icon.clear()
          this.$map.getMap().remove(this.markerList)
          this.markerList = []
          this.facilityList.forEach((t, i) => {
            let marker = this.$map.cover.icon.add(t, () => {
              this.currentCode = t.id
              this.modal = true
              this.$map.cover.icon.clearSelected()
              this.clickItem(t, i)
            })
            this.markerList.push(marker)
            this.markers.push({id: t.id, marker: marker})
              // 标记
          })
          let opt = {
            src: this.iconOnMap[type],
            name: '',
            event: (context) => {
              let temp = {}
              context.markers.forEach(t => {
                let devices = t.getExtData()
                devices.forEach(tt => {
                  temp[tt.device_type_code] = temp[tt.device_type_code] ? temp[tt.device_type_code] + 1 : 1
                })
              })
              let median = {
              // lamp_holder: 'icon-light-24',
                radio: 'icon-boardcast-24',
                video: 'icon-video-24',
                wifi: 'icon-wifi-24',
                environment: 'icon-env-24'
              }
              let _html = ``
              let count = 0
              for (let attr in temp) {
                if (median[attr]) {
                  count++
                  _html += `
${this.$$icon[median[attr]]}" width=12 height=12/>${temp[attr]}
`
                }
              }
            // console.log(summary)
              return {
                count: count,
                content: _html
              }
            }
          }
          this.$map.cover.markers.add(this.markerList, opt)
        } else {
          this.facilityList = []
        }
      })
    },

4. 搜索按钮

    searchLampPole () {
      this.$map.cover.icon.clearSelected(this.markerList)
      let index = -1
      for (let i = 0; i < this.facilityList.length; i++) {
        if (this.facilityList[i].name.toLowerCase().indexOf(this.waterCoversName.toLowerCase()) > -1) {
          index = i
          this.$map.cover.icon.addSelected(this.markerList[index])
        }
      }
      if (index === -1) {
        this.$Message.warning('无匹配的灯杆！')
      }
    },