首先需要写一个输入框
然后给他绑定事件(根据自己实际需求来)
我这个是用到点击事件获取里面的值,当然你们也可以使用其他方法
在这里分享其他的一些方法

1.键盘输入触发事件


2.聚焦触发事件


3.失去聚焦触发事件


下面我们上代码
thml

<view class="grabble"><view class="grabble_view"><input type="text" v-model="valueaa" placeholder="输入姓名搜索" /></view><view @click="grabble">搜索</view></view>

样式就随便写了写,大家可以自由发挥
js

this.valueaa//输入框获取到的值
this.data//输出到页面的数组
this.dataa//接口获取的总数据grabble() {if (this.valueaa === '') {//this.data是下拉框显示的内容,如果为空就展示全部数据this.data = this.dataa//否则执行下面内容dataa} else {//先清空展示的数据this.data = []//然后开始循环全部数据for (var i = 0; i < this.dataa.length; i++) {//判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合//(核心所在,其它都是根据需求来自己写)if (this.dataa[i].account.indexOf(this.valueaa) >= 0) {console.log(this.dataa[i].account)//然后把它丢进要展示的数组里面this.data.push(this.dataa[i])console.log(this.data);}}}}

以上就是一个简单的模糊搜索。

uni-app——模糊搜索相关推荐

  1. 切换 uniapp_万能前端框架uni app初探03:底部导航开发

    前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...

  2. uni app map 地图 漂浮问题及方案

    uni app map 地图 漂浮问题及方案 文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...

  3. uni.app H5(微信公众号定位) uni.getLocation

    最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...

  4. HBuilder X ——Uni app 学习笔记(一)

    HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

  5. uni app中使用图表

    关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...

  6. uni app 自动化索引列表

    uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...

  7. HbuilderX:uni app踩坑之uView-ui

    HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

  8. uni App+H5 实现人脸识别

    uni App+H5 实现人脸识别 通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...

  9. uni app 视频播放功能

    视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等 媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...

  10. uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱

    一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...

最新文章

  1. 2009年浙江大学计算机及软件工程研究生机试真题
  2. php server自定义函数,php:SQL Server用户自定义的函数种类详解
  3. 在Spring Boot 项目中使用Spring AOP实现切面日志
  4. 【Kafka】Kafka认证与授权
  5. php判断版本号大小,通用javascript代码判断版本号是否在版本范围之间_javascript技巧...
  6. html中的坐标从哪里开始,HTML+CSS入门 页面内跳转到相应位置的3种方法
  7. python 倒计时功能怎么用print实现_在python中的print语句中实现60秒倒计时
  8. 数据集:波士顿地区房价预测
  9. 三角函数公式大全(速查手册)
  10. Vscode搭建jdk源码阅读环境 wsl
  11. win7自带截图工具怎样给菜单截图
  12. javascript 中时区知识的整理 UTC GMT
  13. VS2008SP1的MFC测试-Ribbon风格(DJ尐舞图形画板2008)
  14. 2008中国无线互联网细分领域排行榜
  15. 【总结】Android的16ms和垂直同步以及三重缓存
  16. 编译原理 实验三 LR(1)分析法 Java
  17. 拼多多面试——算法实习面试
  18. 用 Matlab 实现 GS 算法设计计算全息图
  19. MySQL数据库管理工具Navicat与PhpMyAdmin功能对比
  20. Spring Boot教程(十二)整合elk(1)

热门文章

  1. oracle手机正则表达式,oracle正则表达式函数 匹配 手机
  2. 接天露之水,吸大地之灵气
  3. 【JavaScript String对象方法】字符串片段提取:slice()、substring()、substr()
  4. 玩客云搭配zerotier保姆级教学,保证学废
  5. 一些常用的物理量计算
  6. 嵌入式linux 4g模块,ARM平台嵌入式Linux下使用3G/4G 模块
  7. Java生鲜电商平台-优惠券设计与架构
  8. CSS:宽高自适应详解
  9. aws免费用户申请时,出现的“信用卡信息无效 或是不支持的类型”解决方法
  10. Pytest测试用例之setup与teardown方法(二)