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>