elementUI中带输入建议的input使用

项目中有一个需求是在输入框输入文字的时候带出有相应内容的提示建议,第一个想法是自己写一个定位元素控制显示隐藏,然后前端进行筛选,仔细思考之后发现有很多问题,比如前端数据需要把数据全部请求过来,但是数据非常多的时候这个方法就不适用,并且还要自己去写模糊查询,下拉框的动画等也需要自己去写,所以我就放弃了自己造轮子的想法,改用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) {
 
  • 21
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值