JS在H5下实现本地历史搜索记录

项目中要用到点击手机键盘搜索按钮时，搜索后本地存储写入历史记录，下面写了个简单的本地搜索，效果如下：

CSS部分

<style>/*搜索框样式*/       .fubao-serch {margin: 10px 15px -15px 15px;border-radius: 25px;}/*块状搜索记录*/#spancircle {padding: 5px 5px 25px 5px;}#spancircle div {padding: 10px 15px;line-height: 12px;font-size: 16px;color: #353535;background-color: #F9F9F9;border-radius: 50px;display: inline-table;margin: 4px;border: none;}</style>

HTML部分

<div class="fubao-serch"><div class="mui-input-row mui-search"><input type="search" id="selectzx" class="mui-input-clear" autocomplete="off" placeholder="搜索资讯"></div><div id="spancircle"><!--<div>怎么注册</div>--></div></div>

JS部分

     var max_history = 5; // 存储最大历史数据$("#selectzx").on('keypress', function(e)  {                  var  keycode  =  e.keyCode;                               if(keycode == '13')  { if(document.getElementById("selectzx").value == "") {mui.toast("请输入搜索内容");return;} else {e.preventDefault();                         //请求搜索接口  searchHistory($(this).val());   }                                     }        })var data = localStorage.getItem('data'); //从本地存储中读取数据historydata(JSON.parse(data)); // 渲染数据function searchHistory(_serchtext) {var data = localStorage.getItem('data'); //从本地存储中读取数据if(data) {      var arr = JSON.parse(data); //如果有数据则转换成对象或数组                        } else {      var arr = []; //如果没有数据，则新增一条}    arr.push(_serchtext);removalDuplicate(arr); // 对用户输入值进行处理(去重-筛选)                 localStorage.setItem('data', JSON.stringify(arr)); //将数据写入到本地存储中}// 数组去重-筛选函数function removalDuplicate(arr) {for(var i = 0; i < arr.length; i++) {var arritem = arr[i].trim(); // 去除字符串两端空格// 如果值为空，则不添加if(arritem == '') {arr.splice(i, 1);}if(arritem !== "") {for(var j = i + 1; j < arr.length; j++) {if(arr[i] == arr[j]) {arr.splice(i, 1); //如果第二次输入的值与第一次相同，则添加第二次的值}}}}return arr;}// 渲染数据function historydata(searchArr) {if(searchArr != null) {searchArr.reverse(); //反转，从后往前添加// 遍历出数据if(searchArr.length <= max_history) { //如果存储数据小于等于max_history,则遍历渲染 for(var i = 0; i < searchArr.length; i++) {$('#spancircle').append('<div onclick=\'JacyWindow("FuBaoSouSuoDetil.html?word=' + encodeURI(searchArr[i]) + '&type=0", "FuBaoSou", "搜索")\'>' + searchArr[i] + '</div>');}} else { //否则渲染最大历史记录条数for(var i = 0; i < max_history; i++) {$('#spancircle').append('<div onclick=\'JacyWindow("FuBaoSouSuoDetil.html?word=' + encodeURI(searchArr[i]) + '&type=0", "FuBaoSou", "搜索")\'>' + searchArr[i] + '</div>');}}}/*   $('#spancircle').append('<div class="clear-history">清空×</div>');*/}/*清空历史搜索记录  此方法清空会退出应用程序 清空用户信息 重新登录*//*  $(".clear-history").click(function(event) {event.stopPropagation();localStorage.clear();$("#spancircle").empty();});*/

JS在H5下实现本地历史搜索记录相关推荐

微信小程序实现历史搜索记录的本地储存和删除
输入框和搜索按钮表单的wxml,没啥特别的,这里绑定了输入框的输入值,样式我就不放上来了 <form class='searchForm' bindsubmit='searchSubmitFn' ...
uni-app使用setStorageSync存储历史搜索记录，与setStorage区别
一.setStorageSync与setStorage的区别都可以将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容. setStorageSync:同步接口,需要 ...
微信小程序————搜索框获取本地缓存搜索记录
微信小程序获取本地缓存的搜索记录 html  //这里是搜索框 <view class="box_search">< ...
Android原生控件SearchView实现历史搜索记录
SearchView实现搜索记录看了一些大神写的贴子简单实现, 但我们功能需要单独删除一条历史搜索记录,好像没在网上找到解决方案,原生方法上也只有suggestions.clearHistory() ...
App开发-使用Vue3+Vant组件实现历史搜索记录功能
使用Vue3+Vant组件实现App历史搜索记录功能最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue ...
Android 天气APP（十五）增加城市搜索、历史搜索记录
上一篇:Android 天气APP(十四)修复UI显示异常.优化业务代码逻辑.增加详情天气显示添加城市新版------------------- 一.推荐城市数据二.推荐城市item布局和适配器 ...
Android常用：手把手教你实现搜索框（含历史搜索记录）
http://blog.csdn.net/carson_ho/article/details/53366570 前言像下图的搜索功能在Android开发中非常常见今天我将手把手教大家如何实现具备历 ...
Android开源实战：SearchView搜索框（含历史搜索记录）
前言 Android开发中,类似下图的搜索功能非常常见搜索功能今天,我将手把手教大家实现一款封装了历史搜索记录功能 & 样式的Android 自定义搜索框开源库,希望你们会喜欢. ...
实现历史搜索记录和搜索功能
uniapp实现搜索功能和搜索历史记录 <template><view class="content"><!-- 搜索引擎这里是模糊查询,后续会加上 ...
vue 移动端搜索功能（带历史搜索记录）
实现效果如图: 实现的功能: 1.点击搜索,把搜索的值存入本地记录,并展示 2.搜索相同的值,要删除旧数据,把新数据放进数组首位 3.清空历史记录 html代码: <div class=&quo ...

JS在H5下实现本地历史搜索记录

JS在H5下实现本地历史搜索记录相关推荐

最新文章

热门文章