小程序中使用模糊搜索和键盘右下角搜索按钮（正则表达式）

最新推荐文章于 2022-05-31 00:08:16 发布
最新推荐文章于 2022-05-31 00:08:16 发布
阅读量434 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 微信小程序笔记 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45764245/article/details/118423218
本文介绍了如何在微信小程序中实现搜索功能。首先在WXML文件中定义input输入框和搜索按钮，然后在JS文件中获取input的输入内容，并利用正则表达式对输入内容进行模糊搜索。具体步骤包括获取用户输入的搜索关键词，使用正则表达式匹配搜索表food的name字段，实现对官方文档的快速查找功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.先在wxml 中定义好input和搜索按钮

在这里插入图片描述

2.在js文件中实现一下操作

2.1获取input输入框中的输入的内容

在这里插入图片描述

2.2使用正则表达式对input框内容进行搜索官方文档

2.2.1food表示搜索的表名
2.2.2name表示搜索的字段
2.2.3so_input表示模糊搜索内容（也就是输入框中获取的数据）
在这里插入图片描述
在这里插入图片描述

2025最新！VSCode快捷键「全场景表格」+IDEA迁移秘籍，效率直接拉满（VSCode 如何使用 IntelliJ IDEA的快捷键，Ctrl+Alt+L提示安装格式化程序）
XiaoqiangClub的博客
05-23 749
🚀 作为全球最受欢迎的编程工具，VSCode的快捷键体系是提升开发效率的核心密码。本文耗时2周整理**200+核心快捷键**，分基础编辑、调试、版本控制等6大场景表格化呈现，特别新增「IntelliJ IDEA迁移方案」：通过安装「IntelliJ IDEA Keybindings」插件，一键复用`Ctrl+Alt+L`等经典快捷键，并针对Python开发者常见的格式化问题，详细讲解「Black Formatter」插件的安装与配置技巧。无论你是从PyCharm/WebStorm迁移而来的老用户，还是想系
【Python】AppUI自动化—appium自动化元素定位、元素事件操作（17）下
最新发布
墩墩分墩
11-10 2489
使用Python或Java调用相关的Client，那么Appium里就会通过`Webdriver协议`（Selenium里同样）在应用层进行HTTP方式的数据请求，收到请求的手机上`Appium APP`的**Server**就会解析相关的请求并且使用`Appium`提供的相应`自动化测试方法`去驱动手机做出相应的操作。
微信小程序中用键盘的搜索功能进行页面跳转
qq_51863697的博客
03-18 3141
我们都知道，小程序中页面跳转是必不可少的，一边都是绑定事件bindtap，在js中写所跳转的路径即可，那么如何在搜索框里面点击手机键盘上的搜索功能，去进行页面跳转呢？这就用到了一个input中的一个事件：bindconfirm，下面就上实例。 1.首先在input中写出事件bindconfirm="bindconfirm"，这里引号中的只是一个事件的名称，这个不用在意。 wxss代码段： <input class="input" bindconfirm="bindconfirm" &g...
微信小程序使用键盘搜索功能
Mr_Tony的专栏
03-26 4530
实现微信小程序的键盘搜索功能时候，需要有三个关键属性： 1、name=‘search’;//search内容随便写 2、bindconfirm='shop_search_function'；//这个变量是js函数 3、confirm-type='search' ;//设置右下角文字 完整例子如下： index.wxml <input class='shop_search_input' na...
php 发短信验证码
科小洋的博客
11-06 363
以小程序的短信验证码为例 其他的发短信方式都是一样的 发验证码的只不过是 把生成的验证码随机数据 放进短信内容里面 数据库记录一下 进行对比 代码均以tp5框架为例 微信小程序 wxml <view class="regi-form-li clearfix"> <text class="fl label">手机号</text> <input class="fl input" disabled="{{smsFlag}}" name="mobile" bindinp
小程序 修改键盘右下角的按钮为搜索，发送，完成，下一个....等按键
ke_sin的博客
06-05 3157
第一次遇到这样的需求，结果真的有办法能改变，真是让人"饿眉z影" ???? 先来一个input框 <input confirm-type="search" bindconfirm="startSearch"></input> confirm-type有效值： search 右下角按钮会变为“搜索” send 右下角按钮会变为“发送” next 右下角按钮会变为“下一个” go 右下角按钮会变为“前往” done 右下角按钮会变为“完成” bindconfirm代表： 绑定的事
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
qianduan666a的博客
07-14 727
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈） 文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css 和js热点面试题 Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子
2021-04-15 测试面试题
weixin_46043529的博客
04-15 8006
第一部分 基础知识部分 (1)请简单列举出你了解的计算机编程语言 C C++ JAVA PHP HTML PYTHON CSS (2)请列举出你了解的熟悉的操作系统 WINDOWS Linux unix qnx (3)简要说明一下数组和链表的区别 不同点:链表是链式的存储结构；数组是顺序的存储结构 链表通过指针来连接元素与元素，数组则是把所有元素按次序依次存储。 链表的插入删除元素相对数组较为简单，不需要移动元素，且较为容易实现长度扩充，但是寻找某个元素较为困难； 数组
小程序搜索功能
06-18
小程序搜索功能，实现了了小程序搜索功能，可直接移植到现有代码中
微信小程序搜索框模糊查询.zip
06-07
微信小程序，搜索框模糊搜索，关键字搜索查询。
微信小程序下拉框搜索功能的实现方法
12-08
最近在做一个项目的时候，需要用到下拉框搜索，网上搜了半天没找到想要的，决心自己动手写一个。 首先看下效果图： 左边是输入框，可以进行模糊查询，右边图标进行选择。 代码部分，我定义了五个参数，和一个自定义的方法， list:下拉框数组， _width：组件宽度， _height：组件高度， bind:action: 自定义方法 考虑到每个人用的时候用的对象数组结构不同我预留了两个字段，做自定义(可不写)，怎么样是不是很强大。 actualvalue：下拉框实际值， showvalue：下拉框显示值 代码我发布到github了代码地址：https://github.com/Zhui
微信小程序-input实现模糊查询功能
sunsineq的专栏
02-08 5878
微信小程序-input实现模糊查询功能 实现模糊查询功能之需求 效果图 实现 踩的坑 JS实现模糊查询的几种方法 性能测试： 结论 实现模糊查询功能之需求 今天在做小程序的时候，遇到一个需求是对列表进行模糊查询。对于模糊查询，一般都是传关键字给后端，由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求，在一定程度上提高用户体验。我目前的情况恰好是后台已经把全部数据给到前端了，所以就想用js对数据进行一个模糊查询。 效果图 实现 HTML &l.
小程序带图标的搜索框，按enter进行功能搜索
qq_36437172的博客
09-28 6454
这里主要说的是输入关键字进行搜索。之前页面设计搜索框都带有搜索按钮进行搜索，没有用过 enter 进行搜索的路过，原谅我不知道还有这个功能。这里主要介绍 不带搜索按钮的输入框，通过点击 enter 间进行搜索。 HTML: &lt;view class="df search_arr"&gt; &lt;icon class="searchcion" size='16' type='sear...
微信小程序搜索框实现模糊查询
qq_33194275的博客
05-31 7780
基于微信小程序的搜索框模糊查询
微信小程序正则模糊搜索功能实现
qq_45632574的博客
06-16 4562
微信小程序正则模糊搜索功能实现（云开发） 微信文档关于正则搜索的部分https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/db.regexp.html 一、正则搜索关键代码 db.collection('gucci').where({ //使用正则查询，在collection"gucci"中模糊搜索 name: db.RegExp({ //以name为关键字
微信小程序正则
yusha123的博客
09-28 1482
//微信小程序的 var reg = getRegExp('^(\d{3})\d{4}(\d{4})$', 'g'); return tel.replace(reg, '$1****$2'); //普通js的 const reg = /^(\d{3})\d{4}(\d{4})$/ return tel.replace(reg, '$1****$2'); 微信正则是使用两个引号代替普通js正则中的两个反斜线（//），而\为转义字符. /^(\d{3})\d{4}(\d{4})$/ === '...
小程序下单账号与支付账号不一致不让支付_码code | 如何借助小程序云开发实现小程序支付功能...
weixin_39921023的博客
11-23 1139
转载来源：编程小石头我们在做小程序支付相关的开发时，总会遇到这些难题。小程序调用微信支付时，必须要有自己的服务器，有自己的备案域名，有自己的后台开发。这就导致我们做小程序支付时的成本很大。本节就来教大家如何使用小程序·云开发实现小程序支付功能的开发。不用搭建自己的服务器，不用有自己的备案域名。只需要简简单单的使用小程序·云开发。(小程序支付效果图)本节知识点1，云开发的部署和使用2，支付...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈阳羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值