zhgkpt-datav/app/src/components/SearchBox.vue

<script>
import { area } from '@/api/area'
import { getJdjcUnit } from "@/api/index.js";
import { throttle } from '@zhgkpt/utils'

export default {
  name: "SearchBox",
  props: {
    area: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    area: {
      handler(val, old) {
        console.log("area watch",val)
        if (val !== '' && val !== old) {
          this.changeAreaHandler(val);
        }
      },
      immediate: true
    },
    value: {
      handler(val) {
        this.searchValue = val
      },
      immediate: true
    },
    searchValue: {
      handler(val) {
        throttle(() => {
          if (val === "") {
          this.result = []
          return;
          }
          getJdjcUnit({
          pageNum: 1,
          pageSize: 10,
          qx: this.areaValue === "重庆市" ? "" : this.areaValue,
            gcjzmc: val,
          }).then((res) => {
            this.result = res.data.rows;
            this.total = res.data.total
            this.activeIndex = -1;
          });
        })()
      },
    }
  },
  data() {
    return {
      areaData: [],
      areaValue: '',
      searchValue: '',
      result: [],
      total: 0,
      activeIndex: -1,
    }
  },
  created() {
    area({
      pageNum: 1,
      pageSize: 100
    }).then(res => {
      this.areaData = res.data.rows
    })
  },
  methods: {
    changeAreaHandler(value) {
      const idx =this.areaData.findIndex(item => item.areaTitle === value)
      if (idx >= 0) {
        this.areaValue = value
        this.areaDetail = this.areaData[idx]
        this.$emit('select', this.areaDetail)
        this.$emit('update:area', value)
      }
    },
    toDetail(item) {
      this.$router.push(`/detail?id=${item.id}`);
    },
    toNextNode() {
      const temp = this.activeIndex + 1
      if (temp === this.result.length) {
        this.activeIndex = 0
      } else {
        this.activeIndex++
      }
    },
    toPrevNode() {
      const temp = this.activeIndex -1
      if (temp === -1) {
        this.activeIndex = this.result.length - 1
      } else {
        this.activeIndex--
      }
    },
    enterToDetail() {
      if (this.activeIndex < 0 || this.activeIndex >= this.result.length) return
      this.toDetail(this.result[this.activeIndex])
    }
  }
}
</script>

<template >
  <div class="search-box">
    <el-select style="width: 150px;" placeholder="区域" :value="areaValue" @change="changeAreaHandler">
      <el-option  :value="item.areaTitle" :label="item.areaTitle" v-for="(item,index) in areaData" :key="index" ></el-option>
    </el-select>
    <div style="position: relative;">
      <el-input @keyup.enter.native="enterToDetail()"  @keyup.up.native="toPrevNode" @keyup.down.native="toNextNode" v-model="searchValue" class="search-box-input" placeholder="请输入所要搜索的建筑名称"></el-input>
      <div class="search-result" v-if="result.length > 0" >
        <div class="search-result__item" :class="{
          active: (index === activeIndex)
        }" @click="toDetail(item)" v-for="(item,index) in result" :key="index">
          {{ item.gcjzmc }}
        </div>
        <div class="search-result__item" v-if="total !== result.length">...</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang='less'>
.search-box {
  display: flex;
  gap: 2px;
  ::v-deep(.el-select) {
    width: 250px;
    height: 40px;
    .el-input__inner {
      border-radius: 0px;
      font-size: 18px;
      border: 0px;
      color: #9BC3FF;
      background: url('../assets/images/border.png') no-repeat;
      background-size: 100% 100%;
      background-color: transparent;
    }
    .el-input__inner::placeholder {
      color: #9BC3FF;
    }
    .el-input .el-select__caret {
      color: #9BC3FF;
    }
  }

  ::v-deep(.el-input.search-box-input) {
    .el-input__inner {
      border-radius: 0px;
      font-size: 18px;
      border: 1px solid #132444;
      color: #9BC3FF;
      background-color: transparent;
    }
    .el-input__inner::placeholder {
      color: #6C83A7;
    }
  }

  .search-result {
    background-size: 100% 100%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    color: #9BC3FF;
    background-color: #132444aa;
    .search-result__item {
      padding: 8px;
      font-size: 18px;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:hover,&.active {
        background-color: rgba(0, 213, 255, 0.3);
        cursor: pointer;
        color: #fff;
      }
    }
  }
  ::v-deep(.el-button) {
    border: none;
    width: 120px;
    height: 40px;
    color: #9BC3FF;
  }
}
</style>