微信小程序 联想搜索功能的实现

最新推荐文章于 2023-06-07 23:28:16 发布
最新推荐文章于 2023-06-07 23:28:16 发布
阅读量974 收藏 5
点赞数
文章标签： 微信小程序 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Neverdrophair/article/details/122527842
版权

联想搜索功能的实现

wxml

image

wxss

image

js

image

image

image

效果

image

 form使用

form | 微信开放文档

表单组件，当点击 <form> 表单中 form-type 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，通过onsubmit事件来接受提交过来的信息值，注意的是需要在表单组件中加上 name属性

wxml添加用户的表单

image

js获取数据

image

效果

image

Neverdrophair
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序input输入框关键字自动联想及关键字高亮
coldriversnow的专栏
02-10 2010
找了好多博客都没有找到关于小程序，模糊查询，自动联想，和关键字高亮显示的文章，没办法，自己造吧。 本文采用的是动态联想，即在input框中输入关键字后，将关键字作为条件去数据库查询，然后将所有查询结果以json格式返回给小程序的js文件，最后用关键字去匹配返回结果，并将结果中的关键字高亮显示。具体效果如下图所示： 不说其他废话了，直接上干货： js文件 // pages/search/search.js Page({ data: { // 模糊查询时长 timer: 0,
微信小程序之页面内搜索查询功能
booze_的博客
11-16 3589
微信小程序之页面内搜索查询功能
微信小程序联想搜索
呀哈的博客
01-16 696
首先在视图层写一个搜索框 <input type="text" placeholder="请输入要搜索的商品名称" bindinput="search"/></view> // 循环输出结果 <block wx:for="{{search}}"> <view>{{item}}</view> </block> 在js中方法 search(e){ // 清除之前的定时器 clearTimeout(this.da
[微信小程序]搜索功能实现,搜索框样式
热门推荐
a_靖的博客
11-28 13万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view cla...
搜索功能的实现----微信小程序
huangzhin的博客
11-03 1136
一、搜索功能的需求描述： 数据：教师名字列表的数组 1、搜索文本为空时，展示所有教师列表 2、输入搜索文本，展示与搜索文本匹配的教师列表 二、搜索功能的算法描述： 1、声明一个数组存放搜索结果， 2、判断搜索文本是否为空，为空则直接设置结果数组赋值为全部教师列表的数组 3、若搜索文本不为空，先将搜索结果数组设置为空数组， 遍历教师列表数组，利用indexOf函数判断每...
微信小程序中下拉选择中带手动输入搜索的实现
02-10
本文将详细介绍如何在微信小程序中实现下拉选择框带手动输入搜索的功能。 首先，我们需要创建一个包含搜索框（input）和选择器（picker）的页面结构。在`wxml`文件中，我们可以这样设置： ```html 请输入搜索...
pulldown:微信小程序联想搜索菜单栏
05-11
在本案例中，"pulldown:微信小程序联想搜索菜单栏"可能是指一个实现这两项功能的代码项目。 源码文件"pulldown-master"很可能包含了一个完整的示例项目，用于展示如何在微信小程序中实现下拉刷新和联想搜索菜单栏。...
微信小程序-美食
03-14
"微信小程序-美食"是一个典型的示例，它集成了多种功能，适合编程初学者学习和实践。 该小程序的主要功能包括： 1. **动态加载美食列表**：在用户打开小程序后，程序会根据服务器端的数据动态加载美食的列表。这种...
微信小程序之页面拦截器
03-29
对需求进行抽象，其实要的就是一个过滤器，对小程序页面的访问进行过滤，符合条件的通过，不符合条件进行其他处理。       场景 小程序有52个页面，其中13个页面无需任何身份，另外39个页面需要系统角色。对于这...
微信小程序源码-小工具类：搜索框.rar
05-01
在这个“微信小程序源码-小工具类：搜索框.rar”压缩包中，包含的应该是关于微信小程序中实现搜索功能的相关源代码。 在微信小程序中，搜索框（Search Bar）是一个非常重要的交互元素，它通常用于用户输入关键词...
个人技术总结——微信小程序的搜索功能
最新发布
m0_52215370的博客
06-07 1790
技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容，不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。技术概述，描述这个技术是做什么的/什么情况下会使用到这个技术，学习该技术的原因，技术的难点在哪里。控制在50-100字内。技术详述，描述你是如何实现和使用该技术的，要求配合代码和流程图详细描述。可以再细分多个点，分开描述各个部分。列出参考文献、参考博客（标题、作者、链接）。
微信小程序通讯录首字母索引效果，车辆品牌选择列表
didingwan3441的博客
03-01 1135
效果图： wxml代码： <block wx:for="{{list}}"> <view class='letter' id="letter{{index}}">{{index}}</view> <view class='item' wx:for="{{item}}" wx:for-item="idx"> ...
微信小程序 实现搜索功能
北芒的博客
07-02 7255
阅读说明 采用了组件的技术点来整理代码 使用到了数据库操作 使用到了 input 标签 书写了 loading 加载中等操作 涉及到了组件的传值 仅供参考 search 页面 书写请求界面 <view> <view class="select"> <input type="text" placeholder="{{subtitle}}" value="{{search}}" bindchange="handlerSearch" /> </v.
微信小程序热门搜索功能实现
竹毛言己
04-24 1398
小程序搜索框，输入框，热门推荐，遮罩视图功能
wx微信小程序实现通讯录
u013141712的专栏
12-21 5392
微信 通讯录
微信小程序如何实现搜索功能
dd602350527的博客
06-27 8020
思路： 1.先对input框绑定个search方法进行搜索 2.在js中写sarch方法，利用wx.request查找数据，success成功之后开始查找自己要的数据. 3.根据input框的输入值且利用filter进行过滤，然后再利用indexof方法查找对应的数据 （indexOf方法获取到指定的字符在字bai符串中第一次出现的位置，从0开始。如果一开始就是e则返回0，如果第二个位置是e则返回1，如果搜完整个字符串都没有e则返回-1 。 反证法 如果该方法不返回-1 就证明该字符串中含有e字符。） 4.
微信小程序云开发实现搜索功能
weixin_45432648的博客
01-01 6109
微信小程序云开发实现搜索功能欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使
微信小程序 联想搜索
孤单的时候狗作陪！的博客
02-15 415
wxml <view style="width: 100%;height: 100rpx; background-color: green;display: flex;justify-content:center;align-items: center;"> <input type="text" placeholder=" 搜索" bindinput="search" style="width: 560rpx;height:60rpx;background-color:wh
小程序模糊搜索（词汇联想）
weixin_30367873的博客
04-30 1184
// 词汇联想//HTML部分 <block wx:if="{{fuzzySearchList && inputValue}}"> <view class="fuzzy_search"> <view class="item" data-keys="{{item.suggest}}" catch...
微信小程序搜索框功能实现
06-07
微信小程序搜索框功能实现主要分为以下几步： 1. 在小程序页面中添加一个搜索框组件，可以使用`<input>`标签实现。 2. 在`<input>`标签中添加`bindinput`事件，实现实时监听搜索框输入的内容。 3. 在`bindinput`事件处理函数中，获取搜索框输入的内容，并将其传递给搜索接口进行查询。 4. 在搜索接口中，将搜索关键词与数据库中存储的数据进行匹配，返回符合条件的结果。 5. 将搜索结果展示在小程序页面中，可以使用`<scroll-view>`、`<list>`等组件进行展示。 6. 可以考虑添加历史记录、热门搜索等功能，提高用户体验。 以上是微信小程序搜索框功能实现的基本步骤，具体实现方式可以根据实际需求进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值