本文主要是介绍使用el-autocomplete实现带输入建议，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
**今天在开发过程中遇到需要实现一个需求，添加便捷的搜索功能，刚开始的想法是直接在搜索input框下面加多个弹窗，可以边输入的过程向后端发起接口，返回所有的数据，后面发现element ui中就有带输入建议的功能
下面是使用和注意点**
<el-autocomplete placeholder="请填写内容" v-model="innerValue" @select="handleSelect" :trigger-on-focus="false" :fetch-suggestions="querySearch"></el-autocomplete>export default {data() {return{restaurants: [],innerValue: ''}}methods:{handleSelect(item) {console.log(item)},querySearch(queryString, cb) {var restaurants = this.restaurantsvar results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurantscb(results)},createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)//此处可以实现局部搜索，模糊搜索}}}
}
这篇关于使用el-autocomplete实现带输入建议的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
