vue 简单自动补全的输入框的示例

2019-11-19 14:11:13

字体：大中小

来源：转载

供稿：网友

实现一个输入框，输入信息后显示由后台返回的数据，供用户选择，之前用的elm的组件，不过那个有点大。。。简单的情况下自己实现一个也能满足要求。。。应该吧。。。

主题包括一个input用于输入，一个div用于展示数据，div里面是数据项item

当在input中按下回车时，会根据信息去后台获取数据，如果用户点击了别的地方，input失去焦点，则提示的div也应该收起来

bug：

在blur事件中，如果直接将isShow设置为false会出问题，先失去焦点，显示面板消失，所以你的点击不会被监听到。。。设置一个计时器，在点击之后10ms后将面板收起来，问题解决。。。

显示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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：angular5 httpclient的示例实战

下一篇：webpack打包js的方法