Element UI 自动根据输入内容提供输入建议

 注意:在Element UI 中的任一个标签中,为保证正常输入,选择,必须加入v-model绑定值

 步骤:

1.另设置一个<el-row>标签

<el-row style="margin: 20px 0">
  <el-autocomplete style="width: 266px" placeholder="请输入内容,我来帮你猜一猜" :fetch-suggestions="querySearch":trigger-on-focus="false" v-model="value3"> </el-autocomplete>

</el-row>

2. 加入关联词(注意值必须带value)

coffees:[{value:'1星巴克咖啡'},{value:'2瑞幸咖啡'},{value:'3库迪咖啡'}]

3.编写回调方法

methods:{
  querySearch(query,cb){  //cb即callback回调函数
   let result= query ? this.coffees.filter(v=>v.value.includes(query) ):this.coffees
    cb(result);
  }
}

 

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Element UI自动完成组件来实现根据输入动态查询。自动完成组件提供了一个可输入的文本框,当用户输入时,它会根据提供的数据源进行查询并显示匹配的结果。以下是一个基本的例子: ``` <el-autocomplete v-model="inputValue" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" ></el-autocomplete> ``` 在这个例子中,我们使用了`<el-autocomplete>`组件,并将`v-model`绑定到`inputValue`变量上。使用`:fetch-suggestions`指定一个异步方法`querySearchAsync`来获取建议的结果。 ``` methods: { querySearchAsync(queryString, cb) { // 根据输入内容进行异步查询 // 查询完成后调用回调函数cb,将结果传递给自动完成组件 // 示例代码: axios.get('/api/search', { params: { q: queryString }}) .then(response => { cb(response.data.results); }) .catch(error => { console.error(error); cb([]); }); } } ``` 在这个例子中,我们定义了一个`querySearchAsync`方法来根据输入内容进行异步查询。在这个方法中,我们可以使用任何异步查询方法,例如使用`axios`库向服务器发起异步查询请求。查询完成后,我们调用回调函数`cb`,将查询结果传递给自动完成组件。在这个例子中,我们将查询结果作为数组传递给了回调函数。 需要注意的是,自动完成组件默认会将查询结果按照输入内容进行模糊匹配,如果您需要自定义匹配规则,可以使用`:custom-item`属性指定一个自定义的匹配方法。 ``` <el-autocomplete v-model="inputValue" :fetch-suggestions="querySearchAsync" :custom-item="customItemMethod" placeholder="请输入内容" ></el-autocomplete> ``` 在这个例子中,我们使用`:custom-item`属性指定一个自定义的匹配方法`customItemMethod`。在这个方法中,我们可以根据自己的需求来实现匹配逻辑。例如,以下是一个根据首字母匹配的自定义匹配方法: ``` methods: { customItemMethod(query, item) { return item.name.substring(0, query.length).toLowerCase() === query.toLowerCase(); } } ``` 在这个例子中,我们定义了一个`customItemMethod`方法来根据首字母匹配查询结果。在这个方法中,我们将查询字符串和查询结果作为参数传入,然后根据自己的需求来实现匹配逻辑。在这个例子中,我们使用`substring`方法获取查询结果的前缀,并将其转换为小写字母,然后与查询字符串进行比较。如果匹配成功,返回`true`,否则返回`false`。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值