Vuetify 实现搜索框

本地效果

实现思路

使用 Vuetify 中的 v-menu 组件实现，控制光标焦点，在输入框获取的焦点时弹出联想词汇菜单，支持上下按键选中内容，菜单位置，样式按需调整即可

数据获取方面通过监听输入框内容变化，调用对应接口获取数据

注意

如果产品功能要求极高的性能，要加防抖和节流处理

<template>
  <div v-on:keyup.enter="search">
    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-text-field
          solo
          hide-details
          label="请输入关键词"
          append-icon="search"
          v-model="text"
          class="input-search"
          autocomplete="off"
          v-on="on"
          ref="search"
        ></v-text-field>
      </template>
      <v-list v-if="items.length > 0" class="border-list" dense>
        <v-list-item v-for="(item, index) in items" :key="index" @click="itemClick(item)">
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>
<script>
export default {
  data () {
    return {
      text: '',
      showSelect: true,
      items: []
    }
  },
  watch: {
    text: 'inputHandle'
  },
  methods: {
    itemClick (item) {
      this.text = item.name
      this.$refs.search.blur()
      // this.$router.push() 
    },
    inputHandle (text) {
      if (text.trim() !== '') {
        this.showSelect = true
        setTimeout(() => {
          this.getEntity()
        }, 300)
      }
    },
    getEntity () {
      // 请求接口更新 items 数据
      this.items = [
        {
          key: '1234',
          name: '1234'
        },
        {
          key: 'abc',
          name: 'abc'
        },
        {
          key: 'def',
          name: 'def'
        },
        {
          key: 'ccc',
          name: 'ccc'
        },
        {
          key: 'ccc',
          name: 'ccc'
        },
        {
          key: 'ccc',
          name: 'ccc'
        }
      ]
    },
    search () {
      this.$refs.search.blur()
      console.log(this.text)
      // this.$router.push()
    }
  }
}
</script>
<style scoped>
.input-search {
  width: 40%;
  margin: auto;
}
.width-20-percent {
  width: 20%;
}
.img-div {
  margin: 16vh 0 40px 0;
  text-align: center;
}
.v-menu__content {
  box-shadow: none !important;
}
.border-list {
  border: 1px solid #eee !important;
}
</style>