js 搜索记录

背景:

移动端的搜索记录,不可能通过调取接口来记录瑟,所以通过在某某.js一个文件定义和处理逻辑。

代码:

//某某.js
var yumingSearch = {init: function () {initF7.GloblalF7.onPageInit("yumingSearch", function (data) {yumingSearch.bindDomEvent();});/*** 我的页面返回按钮时执行*/initF7.GloblalF7.onPageAfterBack("yumingSearch", function (page) {MAPutils.GlobalMap.updateSize();layui.layer.closeAll();});},bindDomEvent: function () {let searchValue = GlobalUtils.debounce(yumingSearch.searchValue, 400)$(".yuming-search-input").on("input propertychange", function (e) {searchValue($(this).val())})$(".yuming-search-quxiao").on("click", function () {$(".yuming-search-list").empty()$(".yuming-search-input").val("")})if (Config.isMobile) {this.setSearchSql(this.getSql)}$(".sousuo-shanchu").on("clcik", function () {yumingSearch.setSearchSql(yumingSearch.delSql)})},listPageV2: null,searchValue: function (val) {if (!val) {return}if (yumingSearch.listPageV2) {yumingSearch.listPageV2.abort();}yumingSearch.listPageV2 = $.ajax({url: Config.API_SERVER_URL + "/enav/appTemplabel/listPageV2",type: "POST",data: {param: JSON.stringify({page: 1,limit: 50,names: val,dataType: 1,username: Config.userInfo.name})}}).always(function (res) {if (res.data && res.data.length > 0) {let content = ""$.each(res.data, function (i, item) {content += `<div class="yuming-search-item" data-obj='${JSON.stringify(item)}'>${item.names}</div>`})$(".yuming-search-list").html(content);$(".yuming-search-item").on("click", function () {let obj = $(this).attr("data-obj");if (obj) {MapInit.backMap();let o = JSON.parse(obj)MAPutils.createYmQuyu(o)yumingSearch.setSearchSql(yumingSearch.saveSql, obj)}})} else {// layui.layer.msg("暂无相关数据")$(".yuming-search-list").html('<div class="yuming-search-item">暂无相关数据</div>')}})},setSearchSql: function (callback, obj) {var db = window.sqlitePlugin.openDatabase({name: Config.databasename,location: 'default',})db.transaction(function (tx) {tx.executeSql("CREATE TABLE IF NOT EXISTS ymSearch (guid text,jsonobj text,createdTime TimeStamp DEFAULT (datetime('now','localtime')))")callback(tx, obj)})},saveSql: function (tx, obj) {tx.executeSql("SELECT * FROM ymSearch WHERE guid = ?", [obj.guid], function (tx, res) {if (res.rows.length > 0) {tx.executeSql("UPDATE ymSearch set jsonobj = ? WHERE guid = ?", [JSON.stringify(obj), obj.guid], function (tx, res) {//                                layui.layer.msg('修改成功!');}, function (e) {//                                layui.layer.msg('修改失败,插入数据!');})} else {tx.executeSql("INSERT INTO ymSearch (guid,jsonobj) VALUES (?,?)", [obj.guid, JSON.stringify(obj)], function (tx, res) {//                                                       layui.layer.msg('插入成功!');console.log('插入成功!');}, function (e) {console.log("插入失败了呀");})}})},delSql: function (tx) {tx.executeSql("DELETE FROM ymSearch", [], function (tx, res) {if (res.rowsAffected > 0) {// layui.layer.msg('清除成功!')$('.yuming-jilu-box').empty()}}, function (e) {layui.layer.msg('清除失败!')})},getSql: function (tx) {tx.executeSql("SELECT * FROM ymSearch DESC LIMIT 10", [], function (tx, res) {if (res.rows.length > 0) {let content = "";for (var i = 0; i < res.rows.length; i++) {let obj = JSON.parse(JSON.parse(res.rows.item(i).jsonobj));content += `<div class="yuming-jilu-item" data-obj='${JSON.stringify(obj)}'>${obj.names}</div>`}$('.yuming-jilu-box').html(content);$(".yuming-jilu-item").on("click", function () {let obj = $(this).attr("data-obj");if (obj) {MapInit.backMap();let o = JSON.parse(obj)MAPutils.createYmQuyu(o)}})}})}
}
yumingSearch.init();

核心方法:

外部通过调用这个方法,并传callback()

 

实际代码:

外部使用,如下:

var mainSearchLog = {init: function () {initF7.GloblalF7.onPageInit("mainSearchLog", function (data) {mainSearchLog.bindDomEvent();});/*** 返回按钮时执行*/initF7.GloblalF7.onPageAfterBack("mainSearchLog", function (page) {MAPutils.GlobalMap.updateSize();});},bindDomEvent: function () {if (Config.isMobile) {yumingSearch.setSearchSql(mainSearchLog.getYumingSearchSql)}},/*** 判断手机端* 查询yumingSearch sql表*/getYumingSearchSql: function (tx) {tx.executeSql("SELECT * FROM ymSearch DESC LIMIT 50", [], function (tx, res) {if (res.rows.length > 0) {let content = "";for (var i = 0; i < res.rows.length; i++) {let obj = JSON.parse(JSON.parse(res.rows.item(i).jsonobj));content += `<div class="search-log-box" data-obj='${JSON.stringify(obj)}'>${obj.names}</div>`}$('.yuming .searchLogBox').html(content);$(".search-log-box").on("click", function () {let obj = $(this).attr("data-obj");if (obj) {MapInit.backMap();let o = JSON.parse(obj)MAPutils.createYmQuyu(o)}})}})},
}
mainSearchLog.init()

核心调用:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/188563.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++的set容器和map容器

set容器 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<string> #include<set> #include<algorithm> using namespace std; //set不给有重复的值&#xff0c;但是插入相同的数值不会报错&#xff0c;只是不会插入进去 void test01() …

直方图均衡化实现

一 直方图均衡化的概念 直方图均衡化(Histogram Equalization)是一种**增强图像对比度**(Image Contrast)的方法&#xff0c;其主要思想是将一副图像的**灰度直方图分布**通过**累积分布函数**变成**近似均匀分布**&#xff08;直观上在某个灰阶范围内像素值保持一致 &#xf…

2023年12月02日新闻简报(国内国际)

新闻简报 每天三分钟&#xff0c;朝闻天下事。今天是&#xff1a;2023年12月02日&#xff0c;星期六&#xff0c;农历十月廿十&#xff0c;祝工作愉快&#xff0c;身体健康&#xff0c;生活喜乐&#xff1a;&#xff1a; 国内新闻 1、商务部&#xff1a;对原产于澳大利亚的进…

【机器视觉技术栈】——工业相机

机器视觉常用部件 工业相机镜头光源 光源突出特征 **相机&#xff1a;**2D&#xff08;面阵相机、线阵相机&#xff09;、3D **镜头&#xff1a;**远心镜头 光源&#xff1a; 机器视觉系列 工业相机基础知识和选型 https://zhuanlan.zhihu.com/p/628519969 工业镜头基础…

【涂鸦T2-U】2、添加光感bh1750

文章目录 前言一、基础介绍二、电路图2.1 电路图12.2 电路图2——实际采用 三、代码四、编译五、刷机六、测试结果小结 前言 本章介绍如何在涂鸦T2-U开发板上添加光感bh1750驱动并实现定时读取数据。 一、基础介绍 BH1750( GY-302 )光照传感器 这篇文章有bh1750的基础介绍。…

八大插入算法(有注释)

直接插入排序 //直接插入排序 void InsertSortingDirectly(int* nums,int numsSize){int j0;for(int i1;i<numsSize-1;i){//定义一个中间变量保存当前要插入的值int tempnums[i];//在前面已排好序的序列中&#xff0c;找到合适的位置插入for(ji-1;j>0;j--){if(nums[j]&g…

滴滴面试:什么是数据库事务?InnoDB一次事务的执行过程?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如滴滴、阿里、极兔、有赞、shein 希音、百度、网易的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 什么是数据库事务&#xff1f; 说说 InnoDB一次事务的执行过…

Unity中PlayerPrefs在PC上存储位置总结

编辑器下和EXE存储位置是不同的&#xff0c;这也不难理解&#xff0c;是为了避免存储位置相同导致开发和测试冲突。 编辑器下位置&#xff1a;HKEY_CURRENT_USER\Software\Unity\UnityEditor\ExampleCompanyName\ExampleProductName EXE位置&#xff1a;HKEY_CURRENT_USER\Sof…

AES加密技术:原理与应用

一、引言 随着信息技术的飞速发展&#xff0c;数据安全已成为越来越受到重视的领域。加密技术作为保障数据安全的重要手段&#xff0c;在信息安全领域发挥着举足轻重的作用。AES&#xff08;Advanced Encryption Standard&#xff09;作为一种对称加密算法&#xff0c;自1990年…

HarmonyOS到底有哪些独特之处?你真正了解鸿蒙多少!

鸿蒙系统太炸裂了&#x1f4a5;我已经后悔了&#x1f62d;后悔没早点学习鸿蒙 HarmonyOS 概念&#xff0c;系统定位 1&#xff1a;鸿蒙系统是由华为公司自主研发的全球化开放源代码操作系统&#xff0c;它具有以下特别之处&#xff1a; 2&#xff1a;分布式架构&#xff1a;…

SQL手工注入漏洞测试(MySQL数据库-字符型)-墨者

———靶场专栏——— 声明&#xff1a;文章由作者weoptions学习或练习过程中的步骤及思路&#xff0c;非正式答案&#xff0c;仅供学习和参考。 靶场背景&#xff1a; 来源&#xff1a; 墨者学院 简介&#xff1a; 安全工程师"墨者"最近在练习SQL手工注入漏洞&#…

深入 C 语言和程序运行原理 实战项目代码在CentOS 7上编译

cat /etc/redhat-release看到操作系统的版本是CentOS Linux release 7.6.1810 (Core)&#xff0c;uname -r可以看到内核版本是3.10.0-957.21.3.el7.x86_64。 安装gtest 参考博客《使用gtest和lcov测试代码覆盖率》 wget https://github.com/google/googletest/archive/refs/…

CentOS系统环境搭建(二十二)——Git进阶

centos系统环境搭建专栏&#x1f517;点击跳转 文章目录 Git进阶1.更新代码2.只拉取Git仓库的部分目录内容2.1初始化空白仓库2.2配置git仓库2.3开启稀疏检出属性2.4设置指定拉取的目录2.5 更新代码 Git进阶 1.更新代码 基于上一篇文章CentOS系统环境搭建&#xff08;二十一&…

鸿蒙原生应用/元服务开发-利用picker选择器来多选相册图片

前言 在之前的时候&#xff0c;测试一个应用进入相册选择图片demo&#xff0c;利用了startAbilityForResult()方法&#xff0c;启动相对应的Ability来完成效果&#xff0c;但是这种方法有限制&#xff0c;一次只能获取一张图片&#xff0c;在完成某些功能测试的时候就很不方便。…

全网最新最全面的Jmeter接口测试:json提取器元件及jsonpath介绍

json提取器元件介绍&#xff1a; json提取器与正则表达式提取器功能类似&#xff0c;也是用来截取响应信息的部分保 存到指定的变量中去&#xff0c;不同的是&#xff0c;它只能用来处理响应正文&#xff0c;并且响应正文必须 是json格式的。它的优势是能更快更灵活的截取json格…

算法通关村—如何使用中序和后序来恢复一颗二叉树

关卡名 理解树的特征 我会了✔️ 内容 1.理解树的结构、基本概念、性质以及存储方式 ✔️ 2.理解树的前中后三种遍历方式 ✔️ 3.理解如何使用前中序列和中后序列来构造树 ✔️ 1 树的常见概念 树是一个有n个有限节点组成一个具有层次关系的集合&#xff0c;每个节点有0…

unicloud云函数url化后,客户端通过url地址向云函数发送数据流并传递到云存储中

在不久前录制过这样一门课程&#xff0c;使用uniapp生态开发API接口&#xff0c;通过这套课程&#xff0c;你不需要后后端Java、Python、PHP等后端语言&#xff0c;你只需要用前端的知识就可以构建这样一套API接口&#xff0c;而且使用uniapp生态开发接口更简单高效&#xff0c…

nner join 与 left join 之间的区别

nner join 与 left join 之间的区别 关于inner join 与 left join 之间的区别&#xff0c;以前以为自己搞懂了&#xff0c;今天从前端取参数的时候发现不是预想中的结果&#xff0c;才知道问题出在inner join 上了。 需求是从数据库查数据&#xff0c;在前端以柱形图的形式展…

windows配置使用supervisor

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、使用步骤1.安装supervisor-win2.配置supervisord3.配置program4.启动supervisord.exe5.supervisorctl.exe管控 二、后台启动总结 前言 windows使用supervi…

Vue学习笔记-路由的基本使用

版本问题 vue2 要下载vue-router3 vue3 要下载vue-router4 使用步骤 安装vue-router&#xff0c;命令&#xff1a;npm i vue-router版本号 在main.js中导入vue-router模块&#xff0c;并且使用vue-router插件 ...... //引入vue-router import VueRouter from vue-router ...…