搜索框（历史记录）cookie

htmlHTML :

<div class="search-bar">

<input type="text" AutoComplete="off" name="keywor d" class="keyword" id="search_text" placeholder="三文鱼">

<button class="search-btn" id="search">搜索</button>

<div class="association_box sp-hide">

<ul id="get_cookie">

</ul>

</div>

</div>

js:

// 获取缓存历史记录

var getCookie = function(name){

var strCookie = document.cookie;

var arrCookie = strCookie.split("; ");

for(var i = 0; i < arrCookie.length; i++){

var arr = arrCookie[i].split("=");

if(arr[0] == name){

return arr[1];

}

}

}

$(function(){

// (yangsiyu)==================================START

//展示全部记录

function showCooikeAll(){

if(res[0] === "undefined" || res[0] === "" || res[0] === "null"){

$(".association_box").addClass("sp-hide");

$("#get_cookie").empty();

}else{

$(".association_box").removeClass("sp-hide");

var obj = "";

$("#get_cookie").empty();

for ( var i in res) {

var arr = "";

arr += "<li>" + res[i] + "</li>";

obj += arr;

}

$("#get_cookie").append(obj);

var len = $("#get_cookie li").length;

if (len == 0) {

$(".association_box").addClass("sp-hide");

} else {

$(".association_box").removeClass("sp-hide");

}

}

}

// 搜索历史 start

function search(){

var res = getCookie("name");

var arr = unescape(getCookie("name")).split(',');

if(arr.length > 19){

arr.pop();

}

arr = arr.join();

var val = $("#search_text").val();

if(res !== undefined){

val = val + "," + arr;

}

//去重

var _val = [];

val = val.split(',');

for(var i = 0; i < val.length; i++){

if(_val.indexOf(val[i]) < 0){

_val.push(val[i]);

}

}

_val = _val.join();

var oDate = new Date();

oDate.setTime(oDate.getTime() + 10*24*3600*1000);

document.cookie = 'name=' + escape(_val) + ';expires=' + oDate.toGMTString() + ';path=/';

}

//点击搜索事件绑定

$("#searchBtn").on("click",search);

//取cookies

var res = unescape(getCookie("name")).split(',');

var val = $("#search_text").val();

//键盘事件 key== 40 (向下) key == 38 (向上) key == 13 (回车)

$("#search_text").keyup(function(event){

var key = event.keyCode;

if(key == 40){

var len = $("#get_cookie li").length;

var index = $("#get_cookie .choose_this").index();

index = index + 1;

if(index > len-1) index = 0;

$(".association_box").removeClass("sp-hide");

$("#get_cookie li").removeClass("choose_this");

$("#get_cookie li").eq(index).addClass("choose_this");

$("#searchKeyWord").val($("#get_cookie li").eq(index).text());

}else if(key == 13){

search(); //cookie记录

var tex = $("#get_cookie .choose_this").text();

$("#search_text").val(tex);

$(".association_box").addClass("sp-hide");

}else if(key == 38){

var len = $("#get_cookie li").length;

var index = $("#get_cookie .choose_this").index();

index = index - 1;

if(index < 0 ) index = len - 1;

$(".association_box").removeClass("sp-hide");

$("#get_cookie li").removeClass("choose_this");

$("#get_cookie li").eq(index).addClass("choose_this");

$("#searchKeyWord").val($("#get_cookie li").eq(index).text());

}else{

var _thisVal = $(this).val();

if(res[0] == "undefined" ){

$("#get_cookie").empty();

$(".association_box").addClass("sp-hide");

}else if( _thisVal == "" || _thisVal == null){

showCooikeAll();

}else{

$(".association_box").removeClass("sp-hide");

var obj = "";

$("#get_cookie").empty();

for(var i in res){

if(res[i].indexOf(_thisVal) > -1){

obj = "<li>"+ res[i] +"</li>";

$("#get_cookie").append(obj);

}

}

var len = $("#get_cookie li").length;

if(len == 0){

$(".association_box").addClass("sp-hide");

}else{

$(".association_box").removeClass("sp-hide");

}

}

}

});

//搜索框失去焦点

function stopPropagation(e){

if (e.stopPropagation)

e.stopPropagation();

else

e.cancelBubble = true;

}

$(document).bind('click',function(){

$(".association_box").addClass("sp-hide");

});

$('#searchKeyWord').bind('click',function(e){

stopPropagation(e);

});

//搜索框聚焦

$("#search_text").focus(function(){

showCooikeAll();

});

//点击选中搜索词语(后隐藏历史记录)

$(document).on("click",".get_cookie li",function(){

var _thisWord = $(this).text();

$("#search_text").val(_thisWord);

$(".association_box").addClass("sp-hide");

});

});

});