1、项目需求中,有用到 el-autocomplete 输入后联想匹配输入建议,并以下拉菜单的形式展示,如图:
2、但是后台返回的值当中有名称,没有value属性,
然后联想搜索的下来数据不展示
3、解决办法:给每一项添加vaule字段就可以了,然后再调用他的回调就可以解决掉了
<el-form-item label="添加影片:">
<el-autocomplete class="inline-input"
v-model="searchFilm.keyword"
style="width: 482px"
:fetch-suggestions="searchFilmFn"
:trigger-on-focus="false"
placeholder="请输入影片名称搜索"
@select="handleSelect"
></el-autocomplete>
<el-button type="primary" class="add_btn" @click="addFilmFn" >添加</el-button>
<span v-if="addMoviesList.length > 499" style="color : red">一个片单最多可包含500部影片</span>
</el-form-item>
// 返回输入建议的方法
searchFilmFn(keyword,cb) {
clearTimeout(this.timer)
// 影片关键字
this.timer = setTimeout( async()=>{
const res = await searchFilmApi(this.searchFilm)
console.log('res',res);
this.moviesList = res.movies
this.moviesList.forEach(res=>{
res.value = res.name
})
// 调用 callback 返回建议列表的数据
cb(this.moviesList);
},500)
},