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 相关文章推荐
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
使用javascript做在线算法编程
May 25 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 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
php之Memcache学习笔记
2013/06/17 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
javascript语言结构小记(一)
2011/09/10 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
js实现左右轮播图
2020/01/09 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python中遍历文件的3个方法
2014/09/02 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
汉语言文学职业规划
2014/02/14 职场文书
公益广告语集锦
2014/03/13 职场文书
小学教师寄语大全
2014/04/03 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Python多线程 Queue 模块常见用法
2021/07/04 Python
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS