这篇文章主要介绍了vue 简单自动补全的输入框的示例，现在分享给大家，也给大家做个参考。
实现一个输入框，输入信息后显示由后台返回的数据，供用户选择，之前用的elm的组件，不过那个有点大。。。简单的情况下自己实现一个也能满足要求。。。应该吧。。。
主题包括一个input用于输入，一个p用于展示数据，p里面是数据项item
当在input中按下回车时，会根据信息去后台获取数据，如果用户点击了别的地方，input失去焦点，则提示的p也应该收起来
bug：
立即学习“前端免费学习笔记（深入）”；
在blur事件中，如果直接将isShow设置为false会出问题，先失去焦点，显示面板消失，所以你的点击不会被监听到。。。设置一个计时器，在点击之后10ms后将面板收起来，问题解决。。。
显示p将内容撑开，改变其他组件布局，设置p的属性，即可，高度设为0，z-index很大，就不会改变其他组件位置
height: 0;z-index: 999;
登录后复制
{{w['content']}}
登录后复制
简单实现代码
{{w['content']}}
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) } }, } .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; }
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
jQuery实现的上传图片本地预览效果简单示例
详解Javascript中new()到底做了些什么
Koa2 之文件上传下载的示例代码
以上就是vue 简单自动补全的输入框的示例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753335.html
