vue 簡單自動補全的輸入框的示例

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>