js实现搜索记录列表
<div class="sy_div28">
<div class="sy_div23">
<span>搜索历史</span> <p class="clear-history">
<img src="{SITE_URL}static/pc/img/sy23.png"/>
<span>清空</span>
</p>
</div>
</div> <ul class="search-history-list"></ul>
效果:
<script type="text/javascript">
function search() {
//.sy_p2 点击搜索按钮
$(".sy_p2").click(function(event) {
var key = $("#wt").val();
if(key){
event.stopPropagation();
searchHistory($("#wt").val());
//console.log(localStorage);
$("#sousuo").submit();
}
});
}
search(); function searchHistory(search_value) {
var len = 5; //设定存储的历史记录个数
if(search_value != "" &&!judgeRepeat(search_value)) {
insertToHistoryList(search_value, len);/*将搜索结果插入到历史记录中*/
if(localStorage.length < len) //0 1 2 3 4
{
localStorage.setItem(localStorage.length, search_value);
} else {
for(var i = 0; i < len; ++i) {
if(i == len - 1) {
localStorage.setItem(i, search_value);
return;
}
var next_value = localStorage.getItem(i + 1);
localStorage.setItem(i, next_value);
}
} }
} /*如果搜索结果与本地存储相同,
则不行存储
*/
function judgeRepeat(search_value) { var repeat_bool = false;
for(var key in localStorage) {
if(search_value == localStorage.getItem(key)) {
return true;
}
}
} /*将搜索结果插入到历史记录中*/
function insertToHistoryList(search_value, len) {
if(search_value != null){
var str = '<li><span>' + search_value + '<span> '+
'<p class="sy_p37"><img src="{SITE_URL}static/pc/img/sy28.png"></p>'+
'</li>'; }else{
var str = '';
} if($(".search-history-list").children().length == 0) {
$(".search-history-list").append($(str));
} else {
if($(".search-history-list").children().length < len) {
$(str).insertBefore($(".search-history-list li:eq(0)"));
} else {
$(".search-history-list li:last").remove(); //超过len个则移除最后一个
$(str).insertBefore($(".search-history-list li:eq(0)"));
}
}
} /*初始化历史记录列表*/
function buildHistory() {
for(var i = 0; i < localStorage.length; ++i) {
var search_name = localStorage.getItem(localStorage.length - 1 - i);
if(search_name != null){
var str = '<li><span onclick="window.location.href=\'{url answer/search}?word='+search_name+'\'">'+localStorage.getItem(localStorage.length - 1 - i)+'</span>'+
'<p class="sy_p37"><img src="{SITE_URL}static/pc/img/sy28.png"></p>'+
'</li>'; }else{
var str = '';
}
$(str).appendTo($(".search-history-list"));
}
} buildHistory(); /*清空历史搜索记录*/
$(".clear-history").click(function(event) {
event.stopPropagation();
localStorage.clear();
$(".search-history-list").empty();
//console.log("History has been cleared");
});
</script>
js实现搜索记录列表的更多相关文章
- 微信小程序开发之带搜索记录的搜索框
实现功能:点击搜索框,有搜索记录时以下拉菜单显示,点击下拉子菜单,将数据赋值到搜索框,点击搜索图标搜索,支持清空历史记录,可手动输入和清空查询关键字, UI: wxml: <!--查询历史记录数 ...
- js、jquery实现列表模糊搜索功能
实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...
- js 实现键盘记录 兼容FireFox和IE
这两天突然想弄弄js的键盘记录,所以就小研究了一下. 主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现 ...
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- JS继续学习记录(一)
JS继续学习记录(一) 总感觉自己的js code写的还算可以,但是又深知好像只知道一些皮毛,所以打算仔细记录一下js晋级学习过程,日日往复 先记录一下自己目前对js的了解吧(20180828) js ...
- 2017、2018面试分享(js面试题记录)记得点赞分享哦;让更多的人看到~~
2017面试分享(js面试题记录) 1. 最简单的一道题 '11' * 2 'a8' * 3 var a = 2, b = 3; var c = a+++b; // c = 5 2. 一道this的问 ...
- js动态生成数据列表
我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...
- js实现的新闻列表垂直滚动实现详解
js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...
- JS将搜索的关键字高亮显示实现代码
这篇文章介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下 用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物 当在文章里头出现这些关键字,就把它加亮显 ...
随机推荐
- pytest进阶之xunit fixture
前言 今天我们再说一下pytest框架和unittest框架相同的fixture的使用, 了解unittest的同学应该知道我们在初始化环境和销毁工作时,unittest使用的是setUp,tearD ...
- Android Gradle 学习笔记(一):Gradle 入门
官网地址:https://gradle.org/. 一.配置 Gradle 环境 安装Gradle之前必须要配置好Java环境,要求JDK 6 以上,并且在环境变量配置好JAVA_HOME.查看Jav ...
- shell if条件判断中:双中括号与单中括号的区别
电脑重装了系统,登录虚拟机的shell脚本需重写,在为编写的脚本命名时发现存在同名脚本,才想起来是连接公司服务器的登录脚本,不想写俩脚本,怕记混了,那就整合一下.代码如下: #!/bin/bash#z ...
- 机器学习之十一问支持向量机(SVM)
推导了支持向量机的数学公式后,还需要对比和总结才能更深入地理解这个模型,所以整理了十一个关于支持向量机的问题. 第一问:支持向量机和感知机(Perceptron)的联系? 1.相同点: 都是一种属于监 ...
- 五行Python代码教你用微信来控制电脑摄像头
如果说强大的标准库奠定了Python发展的基石,丰富的第三方库则是python不断发展的保证.今天就来通过itchart库来实现通过微信对电脑的一些操作. 一.安装库 安装itchat itchat ...
- Cookie浅析
Cookie 翻阅了好久关于Cookie的博客及文档,感觉一直有一块结没有解开,所以一直难以在脑中形成一个顺畅的知识脉络.最后实在是遭不住,拉上我的大神朋友在食堂里坐了3个小时,问了个底朝天!总算形 ...
- Do you have an English name? 你有英文名吗?
文中提到的所有人名都是虚构的,如有雷同,纯属巧合. 当然,你的洋名儿也可能是德文.法文.意大利文,等々々々. 全球化时代,和老外的交流也多了."高端"的程序员想要进欧美系外企,想要 ...
- Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...
- C#保留2位小数几种场景总结
场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25.可不可以刚好保留到最后一位不是 ...
- SQLServer存储过程编写规则
SQLServer编写规则 1. 存储过程 a) 在程序应用中,对于数据库“写”操作的功能通过存储过程来实现. b) 存储过程命名: SP_+表名(+功能名) 对于一个 ...