如何动态实现搜索框下方展示历史搜索记录？

于 2022-11-02 11:41:32 发布
阅读量471 收藏 1
点赞数
分类专栏： Towify使用教程 文章标签： 微信小程序 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Towify/article/details/127648945
版权
本文详细介绍了如何在微信小程序中实现搜索框下方动态展示历史搜索记录的功能。包括创建数据表、制作搜索界面、创建事件、创建触发器以及绑定数据等步骤，通过组件和事件的交互，实现实时更新搜索历史的效果。
摘要由CSDN通过智能技术生成
通过使用数据中心的创建事件和API Hub中定义成功的搜索图片接口实现一个历史搜索展示

效果展示

28fe02f9e3219b4fdc9d4f63abb12ead.jpeg

前置准备

  • 在 API Hub 中创建成功的图片搜索接口

具体步骤

  • 创建数据表
  • 制作搜索界面
  • 创建事件
  • 创建触发器
  • 绑定数据

步骤分解

创建数据表

  • 点击 数据中心
  • 创建 数据表

6bb2f9b4c5e996b4bb8b539e8588157c.jpeg

制作搜索界面

  • 拖拽 组件切换器 到 根容器
  • 拖拽 容器 到 编辑区
  • 选中 组件切换器
  • 点击 检查面板 中的 数据绑定与样式
  • 设置关联内容

2ff3bbaba7c5b05bea95c067f760d1aa.jpeg

  • 选中 组件素材
最低0.47元/天 解锁文章
Towify
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端cookie记录搜索框的历史，在搜索框下面展示最近五条（多个页面的搜索框历史同步）
天意young的博客
10-16 1974
多个页面的搜索框历史同步只需设置cookie的名称和路径一致即可 .gz_search_tab { width: 900px; height: 60px; line-height: 60px; background: #FFF; border-radius: 0px 5px 5px 0; margin: 0px auto; box-sh...
使用JS location实现搜索框历史记录功能
12-29
首先，来看下效果图(样式什么的就不必吐槽了哈) html代码 <form id=hisform> <div id=searchbox> <input id=inpt type=text autocomplete=off /> <input id=btn type=button value=搜索 /> <div id=historybox> <h3>搜索记录:</h3> //用于保存记录信息 <ul id=list> </ul> </div> </div> </fo
html历史搜索记录,javascript-HTML中带有localStorage变量的搜索历史记录
weixin_36168629的博客
06-04 225
我正在使用PhoneGap创建一个jQuery移动应用程序,并且我想列出旧的搜索结果(由表单输入并存储在localStorage中).有两个不同的问题要解决：1)我会将结果存储在localStorage数组中,如果用户第二次搜索,则应将结果添加到旧结果之后的数组中,例如：city [0] =“ New York”,city [1] = “巴黎” …如何保存和读取数组中的字符串,例如：localSt...
小程序实现搜索历史记录，去重搜索字段以及限制展示字段数量
小周sri的码农
03-23 1235
使用微信小程序实现搜索历史记录，去重搜索字段，限制字段数量以及点击重新搜索功能。 对应界面 <view class="search-left"> <view class="search-icon"></view> <input class="search-input" bindinput="bindKeyInput" bindconfirm="OnSearch" .
html5 保存 搜索历史,HTML5 history历史记录的几个关键词
weixin_34173125的博客
06-04 377
Mark一下，省的忘了而已1. HTML4时代的history APIA) history.length：当前历史列表中的历史记录数(我大概测了下，IE6+是从0开始的，其他的是从1开始的，若有误请反馈哈，^_^)；B) history.go(n)：前进或后退n条记录，当n=0或空时会刷新当前页；C) history.back()：后退一步；D) history.forward()：前进一步;2....
Android之搜索框+含搜索历史记录
01-09
最后，为了实现搜索历史记录的显示，你可以在搜索框下方或者单独的界面展示这些记录，通常使用`RecyclerView`或`ListView`来呈现。每次加载数据时，调用`getSearchHistory()`方法获取数据库中的历史记录。 总结起来...
Android开源实战：手把手教你实现一个简单 & 好用的搜索框（含历史搜索记录
m0_67595789的博客
04-28 2168
| — | — | | SearchView.java | 搜索框所有功能的实现 | | RecordSQLiteOpenHelper.java | 创建、管理数据库 & 版本控制 | | EditText_Clear.java | 自定义EdiText，丰富了自定义样式 & 一键删除 | | ICallBack.java | 点击搜索按键后的接口回调方法 | | bCallBack.java | 点击返回按键后的接口回调方法 | | SearchListView.java | 解决List
FlowLayout流式布局实现搜索清空历史记录
08-26
搜索框（`edt`）下方的TagFlowLayout会在布局加载时遍历SP中的数据，创建TextView（`tv.xml`）作为每个历史记录的标签，并添加到FlowLayout中。TextView的背景、间距等可以通过样式资源文件进行定制。 7. **事件...
Android开源实战：手把手教你实现一个简单 & 好用的搜索框（含历史搜索记录）...
weixin_34297300的博客
01-29 416
前言 Android开发中，类似下图的搜索功能非常常见 今天，我将手把手教大家实现一款 封装了 历史搜索记录功能 &amp; 样式 的Android 自定义搜索框 开源库，希望你们会喜欢。 已在Github开源：地址：SearchView，欢迎 Star ！ 目录 1. 简介 一款封装了 历史搜索记录功能 &amp; 样式 的Android自定义搜索框 已在Githu...
微信小程序 input框实现搜索历史记录
weixin_42640297的博客
01-13 2513
微信小程序 input框实现搜索历史记录
历史记录html页面,HTML5 history 页面历史记录
weixin_35849957的博客
06-03 2066
DOM window 对象通过history对象提供了对浏览器历史的访问。跳转属性back(): 向后跳转forward()： 向前跳转go()： 跳转至第n页// 在history中向后跳转window.history.back();window.history.go(-1);// 向前跳转window.history.forward();window.history.go(1);// 当前页w...
搜索功能实现记录
weixin_43695721的博客
04-02 2715
搜索功能实现记录 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录搜索功能实现记录1、简单效果图2、搜索关键字高亮显示3、搜索历史实现3.1、SearchLayout.java3.2、搜索历史保存数据3.3、实现4、使用的软键盘工具类 1、简单效果图 2、搜索关键字高亮显示 参数：color为高亮的颜色；text为搜索的推荐词；keyword为关键字，即输入框中输入的文字。 原理就是封装一个matcherSearchTitle()的静态方法，用SpannableStrin
[源码和文档分享]基于QT实现的搜索引擎
qq_38474647的博客
12-12 425
综述 本搜索引擎 demo 版名为 Prototype Phoenix，实现了在线爬取网页、本地载入网页、对网页源代码进行处理、分词、建立倒排索引、根据 PageRank进行排序、自动识别布尔检索等功能，界面友好，功能完善，运行速度快，鲁棒性强。 总体框架 总体框架为：以主界面为主体，较慢的爬虫和初始化倒排索引为子线程，较快的分词和...
HTML页面浏览历史,浏览历史记录功能
weixin_30611227的博客
06-03 2267
最近在工作当中遇到一个问题 有个页面需要添加一个浏览历史记录功能具体来说就是要记录下用户在此网站的点击历史 并把它们降序排列出来(只显示前6个浏览历史而且不能重复)由于以前对javascript了解不够深入 一时间手足无措后来经过两位高手同事的指点(对这两位同事的敬仰犹如滔滔江水连绵不绝...) 恍然大悟 豁然开朗成功地完成了此功能的添加首先来介绍一下javascript中关于此功能的一些对象和方...
手机端搜索结果页面HTML
ICode联盟
04-19 270
下载地址 手机端网站通用的搜索关键词提示页面模板html下载 dd:
html 搜索历史记录,使用cookie实现历史搜索记录功能
weixin_30199989的博客
06-04 1012
在学习网易云音乐项目的时候，有一个历史搜索记录的功能，就是你点击的关键词被记录下来，然后显示在搜索历史记录里；主要实现方法：1、npm igood-storage2、在组件中导入import storage from 'good-storage';3、我的搜索列表和搜索历史列表的DOM结构热门搜索class="btn"size="mini"v-for="(item, i) in searchHo...
vue+elementUI实现搜索框历史记录
我的博客
04-19 1732
<el-autocomplete v-model="smallcx.appid" placeholder="appid" :fetch-suggestions="querySearch" //重点！！！！！ style="margin-bottom: 10px" /> data(){ return{ noRoNameH...
搜索引擎怎么做历史搜索词记录
iteye_2022的博客
02-28 325
经常性的看到在一些电商网站上的 搜索关键词记录，被其他网站给爬取到。然后去判断用户的行为习惯，作一些 乱七八糟的相关商品推荐或者 广告。不得不说，确实做的很人性化，这是怎么实现的。怎么获取到用户的搜索记录。 采用的是客户端的cookie，通过客户端的cookie记录用户经常搜索的关键字，然后就可以从用户经常搜索的关键字来 判断用户的兴趣。先看一下怎么设置用户查询。cookie在用...
微信小程序开发：实现带搜索记录的搜索框
微信小程序开发之带搜索记录的搜索框 微信小程序开发中，实现带搜索记录的搜索框是一个非常重要...实现带搜索记录的搜索框需要了解用户的使用场景，设计数据库，实现搜索记录保存和显示，解决冲突等多个方面的知识点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值