vue中怎么实现一个自动补全的输入框

本篇文章给大家分享的是有关vue中怎么实现一个自动补全的输入框，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

显示div将内容撑开，改变其他组件布局，设置div的属性，即可，高度设为0，z-index很大，就不会改变其他组件位置

height: 0;
z-index: 999;

<template>
 <div class="container">
  <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/>
  <div class="select-panel">
   <div v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w['content']}}</div>
  </div>
 </div>
</template>

简单实现代码

<template>
 <div class="container">
  <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/>
  <div class="select-panel">
   <div v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w['content']}}</div>
  </div>
 </div>
</template>

<script>
 import {search_word} from "../api/word-api";

 export default {
  name: "auto-complete",
  data() {
   return {
    msg: '',
    words: [],
    isShow: false
   }
  },
  computed: {},

  methods: {
   blur() {
    setTimeout(() => {
      this.isShow = false
     },
     200)
   },
   async search() {
    console.log('search msg', this.msg)
    this.words = await search_word(this.msg)
    console.log(this.words)
    this.isShow = true
   },
   click_item(w) {
    console.log('click word', w)
    this.$emit('add_word', w)
   }
  },

 }
</script>

<style scoped>

 .container {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
 }

 .msg {
  margin: 5px;
 }

 .select-panel {
  height: 0;
  z-index: 999;

 }

 .select-item {
  /*height: 0;*/
  z-index: 999;
  margin: 1px;
  padding: 2px;
  background: #fff;
  opacity: 0.8;
 }
</style>

以上就是vue中怎么实现一个自动补全的输入框，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。