vue 簡單自動補(bǔ)全的輸入框的示例

更新時間：2018年03月12日 15:54:35 作者：阿豪boy

這篇文章主要介紹了vue 簡單自動補(bǔ)全的輸入框的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

實現(xiàn)一個輸入框，輸入信息后顯示由后臺返回的數(shù)據(jù)，供用戶選擇，之前用的elm的組件，不過那個有點大。。。簡單的情況下自己實現(xiàn)一個也能滿足要求。。。應(yīng)該吧。。。

主題包括一個input用于輸入，一個div用于展示數(shù)據(jù)，div里面是數(shù)據(jù)項item

當(dāng)在input中按下回車時，會根據(jù)信息去后臺獲取數(shù)據(jù)，如果用戶點擊了別的地方，input失去焦點，則提示的div也應(yīng)該收起來

bug：

在blur事件中，如果直接將isShow設(shè)置為false會出問題，先失去焦點，顯示面板消失，所以你的點擊不會被監(jiān)聽到。。。設(shè)置一個計時器，在點擊之后10ms后將面板收起來，問題解決。。。

顯示div將內(nèi)容撐開，改變其他組件布局，設(shè)置div的屬性，即可，高度設(shè)為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>

簡單實現(xiàn)代碼

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: