项目中有一个需求是在输入框输入文字的时候带出有相应内容的提示建议,第一个想法是自己写一个定位元素控制显示隐藏,然后前端进行筛选,仔细思考之后发现有很多问题,比如前端数据需要把数据全部请求过来,但是数据非常多的时候这个方法就不适用,并且还要自己去写模糊查询,下拉框的动画等也需要自己去写,所以我就放弃了自己造轮子的想法,改用elementUI中的组件。
autocomplete 是一个可带输入建议的输入框组件,可以直接使用。
<el-autocomplete
class="el-input"
v-model="houseNumber"
:fetch-suggestions="querySearchAsync"
placeholder="请输入房间号"
:trigger-on-focus="false"
@focus="getHouse">
</el-autocomplete>
它分为两种,一种是激活就列出输入建议,一种是输入后匹配输入建议,目前需求是输入后再匹配,所以需要把trigger-on-focus的值设为false.
fetch-suggestions
是一个返回输入建议的方法属性,在该方法中你可以在输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中.
querySearchAsync(queryString, cb) {