js模拟百度主页搜索功能

最新推荐文章于 2024-04-29 22:49:15 发布

有个金毛叫二哈

最新推荐文章于 2024-04-29 22:49:15 发布

阅读量932

点赞数 1

分类专栏： jsp js 文章标签： JS cookie web开发 javascript

jsp 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul,li{list-style-type:none;}
</style>
<script type="text/javascript" language="javascript">
var currentSelIndex = -1;
var oldSelIndex = -1;
var lastArray = new Array();//历史记录
function selectItem(keyword, event) {
// if (keyword == "") {
// document.getElementById("ulItems").style.display = "none";
// return;
// }
// else {
var liLength = document.getElementById("ulItems").getElementsByTagName("li").length; //获取列表数量
if ((event.keyCode == 38 || event.keyCode == 40) && document.getElementById("ulItems").style.display != "none") {
if (liLength > 0) {
oldSelIndex = currentSelIndex;
//上移
if (event.keyCode == 38) {
if (currentSelIndex == -1) {
currentSelIndex = liLength - 1;
}
else {
currentSelIndex = currentSelIndex - 1;
if (currentSelIndex < 0) {
currentSelIndex = liLength - 1;
}
}
if (currentSelIndex != -1) {
document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#cbf3fd";
document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;
}
if (oldSelIndex != -1) {
document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";
}
}
//下移
if (event.keyCode == 40) {
if (currentSelIndex == liLength - 1) {
currentSelIndex = 0;
}else {
currentSelIndex = currentSelIndex + 1;
if (currentSelIndex > liLength - 1) {
currentSelIndex = 0;
}
}
if (currentSelIndex != -1) {
document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#cbf3fd";
document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;
}
if (oldSelIndex != -1) {
document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";
}
}
}
}
else if (event.keyCode == 13) {
if (document.getElementById("ulItems").style.display != "none" && liLength > 0 && currentSelIndex != -1) {
document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;
document.getElementById("ulItems").style.display = "none";
currentSelIndex = -1;
oldSelIndex = -1;
}
lastArray[lastArray.length]=keyword;
var divTxt2 = "";
for(var i=0;i<lastArray.length;i++){
divTxt2 += lastArray[i]+",";
}
setCookie("searchHis",divTxt2,3);
}
else {
autoComplete(keyword);
document.getElementById("ulItems").style.display = "";
currentSelIndex = -1;
oldSelIndex = -1;
}
// }
}

function autoComplete(keyword) {
var liHtml = "";
var ckValue = getCookie("searchHis");
var tmpArray = ckValue.split(",");
if (keyword != "") {
for(var i=0;i<tmpArray.length;i++){
if(tmpArray[i].indexOf(keyword) != -1){
liHtml += "<li id=\"li_"+i+"\" οnmοuseοut=\"sbMoveOut(this.id)\" οnmοuseοver=\"sbMoveHere(this.id)\" οnclick=\"liOnclick(this.id)\">"+tmpArray[i]+"</li>";
}
}
document.getElementById("ulItems").innerHTML = liHtml;
}else {
document.getElementById("ulItems").innerHTML = "<li id=\"li_0\" οnmοuseοut=\"sbMoveOut(this.id)\" οnmοuseοver=\"sbMoveHere(this.id)\" οnclick=\"liOnclick(this.id)\">全网热门搜索</li><li id=\"li_1\" οnmοuseοut=\"sbMoveOut(this.id)\" οnmοuseοver=\"sbMoveHere(this.id)\" οnclick=\"liOnclick(this.id)\">新闻</li>";
}
// if (keyword != "") {
// for(var i=0;i<lastArray.length;i++){
// if(lastArray[i].indexOf(keyword) != -1){
// liHtml += "<li id=\"li_"+i+"\">"+lastArray[i]+"</li>";
// }
// }
// document.getElementById("ulItems").innerHTML = liHtml;
// }else {
// document.getElementById("ulItems").innerHTML = "<li id=\"li_0\">全网热门搜索</li><li id=\"li_1\">新闻</li>";
// }
}

function goOn(){
lastArray[lastArray.length]=document.getElementById("txtKeyword").value;
var divTxt = "";
for(var i=0;i<lastArray.length;i++){
divTxt += lastArray[i]+",";
}
document.getElementById("qryHis").innerText = divTxt;
divTxt = divTxt.substring(0,divTxt.length-1);
setCookie("searchHis",divTxt,3);
}

//鼠标移动到li列表中的事件、改变li的样式
function sbMoveHere(liid){
document.getElementById(liid).style.backgroundColor = "#cbf3fd";
}
function sbMoveOut(liid){
document.getElementById(liid).style.backgroundColor = "#FFFFFF";
}
//鼠标单击li列表中，获取li的文本
function liOnclick(liid){
var liText = document.getElementById(liid).innerText;
document.getElementById("txtKeyword").value=liText;
document.getElementById("ulItems").style.display = "none";
currentSelIndex = -1;
oldSelIndex = -1;
}
//cookie 相关操作作用：防止刷新后历史查询记录清空
function setCookie(ckName,ckValue,ckDay){
var _date = new Date();
_date.setDate(_date.getDate()+ckDay);//单位天
_date.toGMTString();
document.cookie = ckName +"="+escape(ckValue)+";expires="+_date+";path=/"
}
function getCookie(ckName){
if(document.cookie.length>0){//先查询cookie是否为空，为空就return ""
var ckstart = document.cookie.indexOf(ckName+"=");///通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
if (ckstart!=-1){//存在对应cookie
var ckValueStrat = ckstart + ckName.length+1;//取得cookie value值开始下标
var ckValueEnd = document.cookie.indexOf(";",ckValueStrat);//取得 cookie中由ckValueStrat起到第一个；结束之间的index
if (ckValueEnd==-1){
ckValueEnd=document.cookie.length
}
return unescape(document.cookie.substring(ckValueStrat,ckValueEnd));
}
}else{
return "";
}
}
</script>
</head>
<body>
<input id="txtKeyword" type="text" οnfοcus="selectItem(this.value, event)" οnkeyup="selectItem(this.value, event)" style="width:200px;" />
<ul id="ulItems" style="display: none; border:1px solid #cecece; border-top:none; width:200px; padding:2px; margin:0px;">
</ul>
<button id="su222bMit" name="su222bMit" οnclick="goOn()">提交</button>
<div id="qryHis"></div>
<div id="uiNum"></div>
</body>
</html>