首先使用element-ui的input组件下的autocomplete
文档链接:Element - The world's most popular Vue UI framework
<el-autocomplete
class="problemDesc"
v-model="problemDesc"
type="textarea"
:fetch-suggestions="querySearch"
placeholder="请描述需要咨询的问题"
:trigger-on-focus="false"
>
</el-autocomplete>
fetch-suggestions:返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它
Function(queryString, callback)
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
console.log(results);
// 调用 callback 返回建议列表的数据
cb(results);
},
用includes方法判断
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().includes(queryString.toLowerCase()) || restaurant.address.toLowerCase().includes(queryString.toLowerCase()));
};
},
还能用indexOf
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},