$(function() {
// 获取本地历史记录
var arr = JSON.parse(localStorage.getItem("HistoryList"));
// 调用为历史记录赋值的方法
getLocalStorage($(".HistoryList"),arr)
// 搜索栏导航
$(".searchNav").on('click','a',function() {
$(".searchNav li").children().removeClass('active')
$(this).addClass('active')
})
// 搜索框事件
$(".searchBox input").keyup(function(e) {
// 历史记录框出现
$(".History").addClass('focus');
// 判断上下键与enter键
switch(e.keyCode) {
case 38: //上
var lis = $(".HistoryList li");
var tli = lis.filter('.HistoryTrue');
lis.removeClass("HistoryTrue");
if (tli.length == 0 || tli.prev().length==0) lis.filter(':last').addClass('HistoryTrue');
else {tli.prev().addClass('HistoryTrue')};
break;
case 40: //下
var lis = $(".HistoryList li");
var tli = lis.filter('.HistoryTrue');
lis.removeClass('HistoryTrue');
if (tli.length == 0 || tli.next().length==0) lis.filter(':first').addClass('HistoryTrue');
else {tli.next().addClass('HistoryTrue')};
break;
case 13: //回车
var value = $(".searchBox input").val();
arr.push(value)
var li = $('.HistoryList li.HistoryTrue');
if (li.length > 0) {
$('.searchBox input').val(li.text());
$(".History").removeClass('focus');
arr.push(li.text())
// li.parent().hide();
}
// 将数据存储在本地
localStorage.setItem("HistoryList",JSON.stringify(arr))
break;
}
})
// 输入框失去焦点 历史记录框隐藏
$(".searchBox input").blur(function() {
$(".History").removeClass('focus')
})
// 历史记录赋值的方法
function getLocalStorage(ul,arr) {
for(var i = 0; i < arr.length; i++) {
ul.append($('<li>'+ arr[i] +'</li>'))
}
}
})