vue2输入框自动补全
时间: 2023-11-15 19:01:10 浏览: 112
Vue2输入框自动补全可以通过监听用户输入,向后台请求数据,然后将返回的数据展示在下拉框中供用户选择。下面是一个简单的实现方法:
1. 在模板中添加一个输入框和一个下拉框,用v-show指令控制下拉框的显示和隐藏。
2. 监听输入框的keyup.enter事件,当用户按下回车键时向后台请求数据。
3. 在请求数据的回调函数中将返回的数据保存到一个数组中,并将下拉框显示出来。
4. 在下拉框中使用v-for指令遍历保存的数据,并将每个数据项渲染成一个选项。
5. 监听输入框的blur事件,当输入框失去焦点时隐藏下拉框。
下面是一个示例代码:
```
<template>
<div class="container">
<input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/>
<div class="select-panel" v-show="isShow">
<div v-for="item in items" class="select-item" @click="select(item)">{{item}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: '',
items: [],
isShow: false
}
},
methods: {
search() {
// 向后台请求数据
// 将返回的数据保存到items数组中
// 显示下拉框
},
select(item) {
// 将选中的数据填充到输入框中
// 隐藏下拉框
},
blur() {
// 隐藏下拉框
}
}
}
</script>
<style>
.select-panel {
position: absolute;
z-index: 999;
background-color: #fff;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
}
.select-item {
padding: 5px;
cursor: pointer;
}
</style>
```
阅读全文