element-ui input 输入框中 如何输入出现内容建议 简便写法
时间: 2023-10-27 09:11:13 浏览: 60
可以使用 `el-autocomplete` 组件来实现输入框内容建议的功能。它可以自动匹配用户输入的关键词,并在下拉框中显示匹配的结果。下面是一个示例:
```html
<template>
<div>
<el-autocomplete
v-model="inputValue"
:fetch-suggestions="querySearch"
placeholder="请输入关键词"
@select="handleSelect">
<template slot-scope="{ item }">
{{ item.value }}
</template>
</el-autocomplete>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
suggestions: ['HTML', 'CSS', 'JavaScript', 'Vue', 'React', 'Angular']
}
},
methods: {
querySearch(queryString, cb) {
let suggestions = this.suggestions.filter(item => {
return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
})
cb(suggestions)
},
handleSelect(item) {
console.log(item)
}
}
}
</script>
```
在这个示例中,我们使用了 `el-autocomplete` 组件,并将输入框的值绑定到了 `inputValue` 变量上。`fetch-suggestions` 属性指定了一个方法,用于根据用户输入的关键词查询匹配的结果。在 `querySearch` 方法中,我们使用了 `filter` 方法来过滤出匹配的结果,并将结果传递给回调函数 `cb`。最后,在 `handleSelect` 方法中可以获取用户选择的结果。
通过使用 `el-autocomplete` 组件,我们可以很方便地实现输入框内容建议的功能。