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表格行换色的三种实现方法
Jun 27 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
js实现3D旋转效果
Aug 18 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
php数据访问之增删改查操作
2016/05/09 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Puppeteer使用示例详解
2019/06/20 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
学习雷锋倡议书
2014/04/15 职场文书
中班幼儿评语大全
2014/04/30 职场文书
国际会计专业求职信
2014/08/04 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
AJAX学习笔记
2021/05/18 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
如何利用python创作字符画
2022/06/25 Python