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插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
js中的闭包实例展示
Nov 01 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php 异常处理实现代码
2009/03/10 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
python进程与线程小结实例分析
2018/11/11 PHP
YII框架http缓存操作示例
2019/04/29 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS中的phototype详解
2017/02/04 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
教师年终个人自我评价
2013/10/04 职场文书
小学毕业感言150字
2014/02/05 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
五心教育心得体会
2014/09/04 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
就业证明函
2015/06/17 职场文书
安全教育培训制度
2015/08/06 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL