el-autocomplete的select事件自动填充
时间: 2023-08-15 15:13:30 浏览: 144
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
4星 · 用户满意度95%
el-autocomplete组件在选择选项时,不会自动填充输入框。但是,你可以通过监听el-autocomplete的select事件,在选项被选择时手动填充输入框。
例如,你可以在el-autocomplete组件上添加一个select事件的监听器,然后在回调函数中获取选中的选项,并将其值设置为输入框的值。下面是一个示例代码:
```html
<el-autocomplete
v-model="selectedValue"
:fetch-suggestions="querySearch"
@select="handleSelect"
></el-autocomplete>
```
```javascript
data() {
return {
selectedValue: '',
suggestions: ['Apple', 'Banana', 'Orange']
};
},
methods: {
querySearch(queryString, cb) {
// 实现获取建议选项的逻辑
// 在这个例子中,我们直接使用预定义的选项列表
const results = queryString ? this.suggestions.filter(option => {
return option.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
}) : this.suggestions;
cb(results);
},
handleSelect(item) {
this.selectedValue = item;
}
}
```
在上面的例子中,我们通过v-model指令将输入框的值绑定到`selectedValue`属性上。在`querySearch`方法中,你可以根据输入的查询字符串返回建议选项列表。在`handleSelect`方法中,我们将选中的选项赋值给`selectedValue`属性,这样就可以实现自动填充。
阅读全文