当前位置: 首页 > news >正文

AI生成-- autocomplete 模糊搜索

el-autocomplete可以通过设置属性来实现模糊搜索功能。

首先需要设置一个搜索函数,即在输入框输入内容时会调用的函数,用来返回所有符合条件的结果。这个函数需要接收两个参数:输入框的值和一个回调函数。

<el-autocompletev-model="value":fetch-suggestions="querySearch"placeholder="请输入内容"
></el-autocomplete>

然后在Vue实例中定义这个函数,使用一些方法来返回符合条件的结果。

data() {return {value: '',options: [{ value: 'apple' },{ value: 'banana' },{ value: 'orange' },{ value: 'pear' }]}
},
methods: {querySearch(queryString, cb) {let arr = this.options.filter(option => {return option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1})cb(arr)}
}

在上述代码中,我们定义了一个options数组,其中包含一些值。在querySearch函数中,我们根据输入框的值过滤options数组,找到所有符合条件的结果。这里使用了toLowerCase()方法来忽略大小写。最终把过滤出的结果传递给回调函数cb。

http://www.lryc.cn/news/96303.html

相关文章:

  • 怎么用手机做文字二维码?文本内容在线生成二维码技巧
  • 【Ap模块EM】08-怎么让Execution Management成为第一个执行的进程?
  • 使用vscode+platformio搭建arduino开发环境
  • java后端接口实现302跳转
  • 分布式理论:CAP理论 BASE理论
  • Tensorflow学习
  • 5-Ngnix配置基于用户访问控制和IP的虚拟主机
  • springboot jar分离部署
  • Opencv 细节补充
  • 内存泄漏专题(7)hook之宏定义
  • Python 基础(十八):异常处理
  • iTOP-RK3568开发板Docker 安装 Ubuntu 18.04
  • FFmpeg AVFilter的原理(三)- filter是如何被驱动的
  • ARM day8 key1/2/3led
  • windows 系统安装sonarqube
  • Unity噪声图生成(编辑器扩展)
  • http-为什么文件上传要转成Base64
  • htmlCSS-----定位
  • 腾讯云大数据型CVM服务器实例D3和D2处理器CPU型号说明
  • 计算机科学cs/电子信息ei面试准备——数学基础/线性代数复习
  • 极速查找(2)-算法分析
  • flask路由添加参数
  • 网络安全系统教程+学习路线(自学笔记)
  • 23. 合并 K 个升序链表
  • Nexus3部署、配置+SpringBoot项目Demo
  • linux下用docker安装mysql
  • Vue - 可视化用户角色、菜单权限、按钮权限配置(动态获取菜单路由)
  • hive库操作示例
  • LeetCode第 N 个泰波那契数 (认识动态规划)
  • 线程安全问题(内存可见性)