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


Posted in Javascript onMarch 12, 2018

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

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

主题包括一个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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
webpack打包js的方法
Mar 12 #Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 #Javascript
vue路由懒加载的实现方法
Mar 12 #Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 #Javascript
详解vuex的简单使用
Mar 12 #Javascript
js提取中文拼音首字母的封装工具类
Mar 12 #Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 #Javascript
You might like
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
python ElementTree 基本读操作示例
2009/04/09 Python
python 域名分析工具实现代码
2009/07/15 Python
Python写的一个简单DNS服务器实例
2014/06/04 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python类属性的延迟计算
2016/10/22 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python3中的json模块使用详解
2018/05/05 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
大学生思想汇报范文
2013/12/31 职场文书
大学毕业感言
2014/01/10 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
教育学习自我评价
2014/02/03 职场文书
纠风工作实施方案
2014/03/15 职场文书
药剂专业求职信
2014/06/20 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
委托书英文
2015/01/28 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python