伏龙阁资源网

jquery实现联想词搜索框和搜索结果分页的示例
站长资源 2024/11/27 佚名
2 0

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<link href="css/suggest.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> 
<link href="css/pagination.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> 
<style type="text/css">
em{font-style:normal;color: red;font-weight: bold}
</style>
 
 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.min.js">


result.jsp





<%@page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<link href="css/suggest.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> 
<link href="css/pagination.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> 
<style type="text/css">
em{font-style:normal;color: red;font-weight: bold}
</style>
 
 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.min.js">


suggest.htm





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<link href="css/suggest.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.min.js">


jquery.autocomplete.css





.ac_results {
	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}
 
.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}
 
.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font: menu;
	font-size: 12px;
	/* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
	line-height: 16px;
	overflow: hidden;
}
 
.ac_loading {
	background: white url('indicator.gif') right center no-repeat;
}
 
.ac_odd {
	background-color: #eee;
}
 
.ac_over {
	background-color: #0A246A;
	color: white;
}






pagination.css





div.digg {padding: 3px; margin: 3px; text-align: center; font-family:Verdana; font-size:12px;}
div.digg a { border: #aaaadd 1px solid; padding:2px 5px; margin: 2px; color: #000099; text-decoration: none}
div.digg a:hover {border: #000099 1px solid; color: #000; }
div.digg a:active {border: #000099 1px solid; color: #000; }
div.digg span.current {border: #000099 1px solid; padding:2px 5px; font-weight: bold; margin: 2px; color: #fff;background-color: #000099}
div.digg span.disabled { border: #eee 1px solid; padding:2px 5px; margin: 2px; color: #ddd; padding-top: 2px;}
 
 
 
 
/*css meneame style pagination*/
div.meneame {
 padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 3px; margin: 3px; color: #ff6500; padding-top: 3px; text-align: center; font-family:Verdana; font-size:12px;
}
div.meneame a {
 border-right: #ff9600 1px solid; padding-right: 7px; background-position: 50% bottom; border-top: #ff9600 1px solid; padding-left: 7px; background-image: url(meneame.jpg); padding-bottom: 5px; border-left: #ff9600 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff9600 1px solid; text-decoration: none
}
div.meneame a:hover {
 border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794
}
div.meneame a:active {
 border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794
}
div.meneame span.current {
 border-right: #ff6500 1px solid; padding-right: 7px; border-top: #ff6500 1px solid; padding-left: 7px; font-weight: bold; padding-bottom: 5px; border-left: #ff6500 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff6500 1px solid; background-color: #ffbe94
}
div.meneame span.disabled {
 border-right: #ffe3c6 1px solid; padding-right: 7px; border-top: #ffe3c6 1px solid; padding-left: 7px; padding-bottom: 5px; border-left: #ffe3c6 1px solid; color: #ffe3c6; margin-right: 3px; padding-top: 5px; border-bottom: #ffe3c6 1px solid
}
 
 
/*css flickr style pagination*/
div.flickr {
 padding:0px;margin:0px; text-align:center; font-family:Verdana; font-size:12px;
}
div.flickr a {
 border-right: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #dedfde 1px solid; padding-left: 6px; padding-bottom: 2px; border-left: #dedfde 1px solid; color: #0061de; margin-right: 3px; padding-top: 2px; border-bottom: #dedfde 1px solid; text-decoration: none
}
div.flickr a:hover {
 border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de
}
div.meneame a:active {
 border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de
}
div.flickr span.current {
 padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #ff0084; margin-right: 3px; padding-top: 2px
}
div.flickr span.disabled {
 padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px
}
 
 
/*css scott style pagination*/
 
 
div.scott {
 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; font-family:Verdana; font-size:12px;
}
div.scott a {
 border-right: #ddd 1px solid; padding-right: 5px; border-top: #ddd 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ddd 1px solid; color: #88af3f; margin-right: 2px; padding-top: 2px; border-bottom: #ddd 1px solid; text-decoration: none
}
div.scott a:hover {
 border-right: #85bd1e 1px solid; border-top: #85bd1e 1px solid; border-left: #85bd1e 1px solid; color: #638425; border-bottom: #85bd1e 1px solid; background-color: #f1ffd6
}
div.scott a:active {
 border-right: #85bd1e 1px solid; border-top: #85bd1e 1px solid; border-left: #85bd1e 1px solid; color: #638425; border-bottom: #85bd1e 1px solid; background-color: #f1ffd6
}
div.scott span.current {
 border-right: #b2e05d 1px solid; padding-right: 5px; border-top: #b2e05d 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #b2e05d 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #b2e05d 1px solid; background-color: #b2e05d
}
div.scott span.disabled {
 border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
}
 
 
 
 
 
 
/*css quotes style pagination*/
 
 
div.quotes {
 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; font-family:Verdana; font-size:12px;
}
div.quotes a {
 border-right: #ddd 1px solid; padding-right: 5px; border-top: #ddd 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ddd 1px solid; color: #aaa; margin-right: 2px; padding-top: 2px; border-bottom: #ddd 1px solid; text-decoration: none
}
div.quotes a:hover {
 border-right: #a0a0a0 1px solid; padding-right: 5px; border-top: #a0a0a0 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #a0a0a0 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: #a0a0a0 1px solid
}
div.quotes a:active {
 border-right: #a0a0a0 1px solid; padding-right: 5px; border-top: #a0a0a0 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #a0a0a0 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: #a0a0a0 1px solid
}
div.quotes span.current {
 border-right: #e0e0e0 1px solid; padding-right: 5px; border-top: #e0e0e0 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #e0e0e0 1px solid; color: #aaa; margin-right: 2px; padding-top: 2px; border-bottom: #e0e0e0 1px solid; background-color: #f0f0f0
}
div.quotes span.disabled {
 border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
}
 
 
 
 
 
 
/*css black style pagination*/
 
 
div.black {
 padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 10px; margin: 3px; color: #a0a0a0; padding-top: 10px; background-color: #000; text-align: center; font-family:Verdana; font-size:12px;
}
div.black a {
 border-right: #909090 1px solid; padding-right: 5px; background-position: 50% bottom; border-top: #909090 1px solid; padding-left: 5px; background-image: url(bar.gif); padding-bottom: 2px; border-left: #909090 1px solid; color: #c0c0c0; margin-right: 3px; padding-top: 2px; border-bottom: #909090 1px solid; text-decoration: none
}
div.black a:hover {
 border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040
}
div.black a:active {
 border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040
}
div.black span.current {
 border-right: #ffffff 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ffffff 1px solid; color: #ffffff; margin-right: 3px; padding-top: 2px; border-bottom: #ffffff 1px solid; background-color: #606060
}
div.black span.disabled {
 border-right: #606060 1px solid; padding-right: 5px; border-top: #606060 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #606060 1px solid; color: #808080; margin-right: 3px; padding-top: 2px; border-bottom: #606060 1px solid
}
 
 
 
 
 
 
 
 
/*css black2 style pagination*/
 
 
div.black2 {
 padding-right: 7px; padding-left: 7px; padding-bottom: 7px; margin: 3px; padding-top: 7px; text-align: center; font-family:Verdana; font-size:12px;
}
div.black2 a {
 border-right: #000000 1px solid; padding-right: 5px; border-top: #000000 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #000000 1px solid; color: #000000; padding-top: 2px; border-bottom: #000000 1px solid; text-decoration: none
}
div.black2 a:hover {
 border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; color: #fff; border-bottom: #000000 1px solid; background-color: #000
}
div.black2 a:active {
 border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; color: #fff; border-bottom: #000000 1px solid; background-color: #000
}
div.black2 span.current {
 border-right: #000000 1px solid; padding-right: 5px; border-top: #000000 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #000000 1px solid; color: #fff; padding-top: 2px; border-bottom: #000000 1px solid; background-color: #000000
}
div.black2 span.disabled {
 border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
}
 
 
 
 
 
 
 
 
/*css black-red style pagination*/
 
 
div.black-red {
 font-size: 11px; color: #fff; font-family: tahoma, arial, helvetica, sans-serif; background-color: #3e3e3e;
}
div.black-red a {
 padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #3e3e3e; text-decoration: none
}
div.black-red a:hover {
 color: #fff; background-color: #ec5210
}
div.black-red a:active {
 color: #fff; background-color: #ec5210
}
div.black-red span.current {
 padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #313131
}
div.black-red span.disabled {
 padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #868686; padding-top: 2px; background-color: #3e3e3e
}
 
 
 
 
/*css green-black style pagination*/
 
 
div.green-black {
 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; font-family:Verdana; font-size:12px;
}
div.green-black a {
 border-right: #2c2c2c 1px solid; padding-right: 5px; border-top: #2c2c2c 1px solid; padding-left: 5px; background: url(image1.gif) #2c2c2c; padding-bottom: 2px; border-left: #2c2c2c 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #2c2c2c 1px solid; text-decoration: none
}
div.green-black a:hover {
 border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid
}
div.green-black a:active {
 border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid
}
div.green-black span.current {
 border-right: #aad83e 1px solid; padding-right: 5px; border-top: #aad83e 1px solid; padding-left: 5px; font-weight: bold; background: url(image2.gif) #aad83e; padding-bottom: 2px; border-left: #aad83e 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #aad83e 1px solid
}
div.green-black span.disabled {
 border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
}
 
 
/*css grayr style pagination*/
 
 
div.grayr {
 padding-right: 2px; padding-left: 2px; font-size: 11px; padding-bottom: 2px; padding-top: 2px; font-family: tahoma, arial, helvetica, sans-serif; background-color: #c1c1c1;
}
div.grayr a {
 padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #000; padding-top: 2px; background-color: #c1c1c1; text-decoration: none
}
div.grayr a:hover {
 color: #000; background-color: #99ffff
}
div.grayr a:active {
 color: #000; background-color: #99ffff
}
div.grayr span.current {
 padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #303030; padding-top: 2px; background-color: #fff
}
div.grayr span.disabled {
 padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #797979; padding-top: 2px; background-color: #c1c1c1
}
 
 
 
 
 
 
 
 
/*css yellow style pagination*/
 
 
div.yellow {
 padding-right: 7px; padding-left: 7px; padding-bottom: 7px; margin: 3px; padding-top: 7px; text-align: center; font-family:Verdana; font-size:12px;
}
div.yellow a {
 border-right: #ccc 1px solid; padding-right: 5px; border-top: #ccc 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #ccc 1px solid; color: #000; padding-top: 2px; border-bottom: #ccc 1px solid; text-decoration: none
}
div.yellow a:hover {
 border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; color: #000; border-bottom: #f0f0f0 1px solid
}
div.yellow a:active {
 border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; color: #000; border-bottom: #f0f0f0 1px solid
}
div.yellow span.current {
 border-right: #d9d300 1px solid; padding-right: 5px; border-top: #d9d300 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #d9d300 1px solid; color: #fff; padding-top: 2px; border-bottom: #d9d300 1px solid; background-color: #d9d300
}
div.yellow span.disabled {
 border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
}
 
 
 
 
 
 
/*css jogger style pagination*/
 
 
div.jogger {
 padding-right: 2px; padding-left: 2px; padding-bottom: 2px; margin: 7px; padding-top: 2px; font-family: "lucida sans unicode", "lucida grande", lucidagrande, "lucida sans", geneva, verdana, sans-serif
}
div.jogger a {
 padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #ee4e4e; text-decoration: none
}
div.jogger a:hover {
 padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #de1818
}
div.jogger a:active {
 padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #de1818
}
div.jogger span.current {
 padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #6d643c; padding-top: 0.5em; background-color: #f6efcc
}
div.jogger span.disabled {
 display: none
}
 
 
 
 
 
 
/*css starcraft2 style pagination*/
 
 
div.starcraft2 {
 padding-right: 3px; padding-left: 3px; font-weight: bold; font-size: 13.5pt; padding-bottom: 3px; margin: 3px; color: #fff; padding-top: 3px; font-family: arial; background-color: #000; text-align: center
}
div.starcraft2 a {
 margin: 2px; color: #fa0; background-color: #000; text-decoration: none
}
div.starcraft2 a:hover {
 color: #fff; background-color: #000
}
div.starcraft2 a:active {
 color: #fff; background-color: #000
}
div.starcraft2 span.current {
 font-weight: bold; margin: 2px; color: #fff; background-color: #000
}
div.starcraft2 span.disabled {
 margin: 2px; color: #444; background-color: #000
}
 
 
 
 
 
 
/*css tres style pagination*/
 
 
div.tres {
 padding-right: 7px; padding-left: 7px; font-weight: bold; font-size: 13.2pt; padding-bottom: 7px; margin: 3px; padding-top: 7px; font-family: arial, helvetica, sans-serif; text-align: center
}
div.tres a {
 border-right: #d9d300 2px solid; padding-right: 5px; border-top: #d9d300 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #d9d300 2px solid; color: #fff; padding-top: 2px; border-bottom: #d9d300 2px solid; background-color: #d90; text-decoration: none
}
div.tres a:hover {
 border-right: #ff0 2px solid; border-top: #ff0 2px solid; border-left: #ff0 2px solid; color: #000; border-bottom: #ff0 2px solid; background-color: #ff0
}
div.tres a:active {
 border-right: #ff0 2px solid; border-top: #ff0 2px solid; border-left: #ff0 2px solid; color: #000; border-bottom: #ff0 2px solid; background-color: #ff0
}
div.tres span.current {
 border-right: #fff 2px solid; padding-right: 5px; border-top: #fff 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #fff 2px solid; color: #000; padding-top: 2px; border-bottom: #fff 2px solid
}
div.tres span.disabled {
 display: none
}
 
 
 
 
 
 
/*css megas512 style pagination*/
 
 
div.megas512 {
 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.megas512 a {
 border-right: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #dedfde 1px solid; padding-left: 6px; padding-bottom: 2px; border-left: #dedfde 1px solid; color: #99210b; margin-right: 3px; padding-top: 2px; border-bottom: #dedfde 1px solid; text-decoration: none
}
div.megas512 a:hover {
 border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #777777
}
div.megas512 a:active {
 border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #777777
}
div.megas512 span.current {
 padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #99210b; margin-right: 3px; padding-top: 2px
}
div.megas512 span.disabled {
 padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px
}
 
 
 
 
 
 
/*css technorati style pagination*/
 
 
div.technorati {
 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.technorati a {
 border-right: #ccc 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #ccc 1px solid; padding-left: 6px; font-weight: bold; padding-bottom: 2px; border-left: #ccc 1px solid; color: rgb(66,97,222); margin-right: 3px; padding-top: 2px; border-bottom: #ccc 1px solid; text-decoration: none
}
div.technorati a:hover {
 background-image: none; color: #fff; background-color: #4261df
}
div.technorati a:active {
 background-image: none; color: #fff; background-color: #4261df
}
div.technorati span.current {
 padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #000; margin-right: 3px; padding-top: 2px
}
div.technorati span.disabled {
 display: none
}
 
 
 
 
 
 
/*css youtube style pagination*/
 
 
div.youtube {
 padding-right: 6px; border-top: #9c9a9c 1px dotted; padding-left: 0px; font-size: 13px; padding-bottom: 4px; color: #313031; padding-top: 4px; font-family: arial, helvetica, sans-serif; background-color: #cecfce; text-align: right
}
div.youtube a {
 padding-right: 3px; padding-left: 3px; font-weight: bold; padding-bottom: 1px; margin: 0px 1px; color: #0030ce; padding-top: 1px; text-decoration: underline
}
div.youtube a:hover {
 
}
div.youtube a:active {
 
}
div.youtube span.current {
 padding-right: 2px; padding-left: 2px; padding-bottom: 1px; color: #000; padding-top: 1px; background-color: #fff
}
div.youtube span.disabled {
 display: none
}
 
 
 
 
 
 
 
 
/*css msdn style pagination*/
 
 
div.msdn {
 padding-right: 6px; padding-left: 0px; font-size: 13px; padding-bottom: 4px; color: #313031; padding-top: 4px; font-family: verdana,tahoma,arial,helvetica,sans-serif; background-color: #fff; text-align: right
}
div.msdn a {
 border-right: #b7d8ee 1px solid; padding-right: 6px; border-top: #b7d8ee 1px solid; padding-left: 5px; padding-bottom: 4px; margin: 0px 3px; border-left: #b7d8ee 1px solid; color: #0030ce; padding-top: 5px; border-bottom: #b7d8ee 1px solid; text-decoration: none
}
div.msdn a:hover {
 border-right: #b7d8ee 1px solid; border-top: #b7d8ee 1px solid; border-left: #b7d8ee 1px solid; color: #0066a7; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
}
div.pagination a:active {
 border-right: #b7d8ee 1px solid; border-top: #b7d8ee 1px solid; border-left: #b7d8ee 1px solid; color: #0066a7; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
}
div.msdn span.current {
 border-right: #b7d8ee 1px solid; padding-right: 6px; border-top: #b7d8ee 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 4px; margin: 0px 3px; border-left: #b7d8ee 1px solid; color: #444444; padding-top: 5px; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
}
div.msdn span.disabled {
 display: none
}
 
 
 
 
 
 
 
 
/*css badoo style pagination*/
 
 
div.badoo {
 padding-right: 0px; padding-left: 0px; font-size: 13px; padding-bottom: 10px; color: #48b9ef; padding-top: 10px; font-family: arial, helvetica, sans-serif; background-color: #fff; text-align: center
}
div.badoo a {
 border-right: #f0f0f0 2px solid; padding-right: 5px; border-top: #f0f0f0 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 0px 2px; border-left: #f0f0f0 2px solid; color: #48b9ef; padding-top: 2px; border-bottom: #f0f0f0 2px solid; text-decoration: none
}
div.badoo a:hover {
 border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid
}
div.badoo a:active {
 border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid
}
div.badoo span.current {
 border-right: #ff5a00 2px solid; padding-right: 5px; border-top: #ff5a00 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ff5a00 2px solid; color: #fff; padding-top: 2px; border-bottom: #ff5a00 2px solid; background-color: #ff6c16
}
div.badoo span.disabled {
 display: none
}
 
 
 
 
 
 
 
 
 
 
/*css manu style pagination*/
 
 
.manu {
 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
.manu a {
 border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #036cb4; padding-top: 2px; border-bottom: #eee 1px solid; text-decoration: none
}
.manu a:hover {
 border-right: #999 1px solid; border-top: #999 1px solid; border-left: #999 1px solid; color: #666; border-bottom: #999 1px solid
}
.manu a:active {
 border-right: #999 1px solid; border-top: #999 1px solid; border-left: #999 1px solid; color: #666; border-bottom: #999 1px solid
}
.manu .current {
 border-right: #036cb4 1px solid; padding-right: 5px; border-top: #036cb4 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #036cb4 1px solid; color: #fff; padding-top: 2px; border-bottom: #036cb4 1px solid; background-color: #036cb4
}
.manu .disabled {
 border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
}
 
 
/*css viciao style pagination*/
 
 
div.viciao {
 margin-top: 20px; margin-bottom: 10px
}
div.viciao a {
 border-right: #8db5d7 1px solid; padding-right: 5px; border-top: #8db5d7 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #8db5d7 1px solid; color: #000; margin-right: 2px; padding-top: 2px; border-bottom: #8db5d7 1px solid; text-decoration: none
}
div.viciao a:hover {
 border-right: red 1px solid; padding-right: 5px; border-top: red 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: red 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: red 1px solid
}
div.viciao a:active {
 border-right: red 1px solid; padding-right: 5px; border-top: red 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: red 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: red 1px solid
}
div.viciao span.current {
 border-right: #e89954 1px solid; padding-right: 5px; border-top: #e89954 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #e89954 1px solid; color: #000; margin-right: 2px; padding-top: 2px; border-bottom: #e89954 1px solid; background-color: #ffca7d
}
div.viciao span.disabled {
 border-right: #ccc 1px solid; padding-right: 5px; border-top: #ccc 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ccc 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #ccc 1px solid
}
 
 
 
 
 
 
 
 
 
 
/*css yahoo2 style pagination*/
 
 
div.yahoo2 {
 padding-right: 3px; padding-left: 3px; font-size: 0.85em; padding-bottom: 3px; margin: 3px; padding-top: 3px; font-family: tahoma,helvetica,sans-serif; text-align: center
}
div.yahoo2 a {
 border-right: #ccdbe4 1px solid; padding-right: 8px; background-position: 50% bottom; border-top: #ccdbe4 1px solid; padding-left: 8px; padding-bottom: 2px; border-left: #ccdbe4 1px solid; color: #0061de; margin-right: 3px; padding-top: 2px; border-bottom: #ccdbe4 1px solid; text-decoration: none
}
div.yahoo2 a:hover {
 border-right: #2b55af 1px solid; border-top: #2b55af 1px solid; background-image: none; border-left: #2b55af 1px solid; color: #fff; border-bottom: #2b55af 1px solid; background-color: #3666d4
}
div.yahoo2 a:active {
 border-right: #2b55af 1px solid; border-top: #2b55af 1px solid; background-image: none; border-left: #2b55af 1px solid; color: #fff; border-bottom: #2b55af 1px solid; background-color: #3666d4
}
div.yahoo2 span.current {
 padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #000; margin-right: 3px; padding-top: 2px
}
div.yahoo2 span.disabled {
 display: none
}
 
 
div.yahoo2 a.next {
 border-right: #ccdbe4 2px solid; border-top: #ccdbe4 2px solid; margin: 0px 0px 0px 10px; border-left: #ccdbe4 2px solid; border-bottom: #ccdbe4 2px solid
}
div.yahoo2 a.next:hover {
 border-right: #2b55af 2px solid; border-top: #2b55af 2px solid; border-left: #2b55af 2px solid; border-bottom: #2b55af 2px solid
}
div.yahoo2 a.prev {
 border-right: #ccdbe4 2px solid; border-top: #ccdbe4 2px solid; margin: 0px 10px 0px 0px; border-left: #ccdbe4 2px solid; border-bottom: #ccdbe4 2px solid
}
div.yahoo2 a.prev:hover {
 border-right: #2b55af 2px solid; border-top: #2b55af 2px solid; border-left: #2b55af 2px solid; border-bottom: #2b55af 2px solid
}
/*css sabrosus style pagination*/
 
 
div.sabrosus {
 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.sabrosus a {
 border-right: #9aafe5 1px solid; padding-right: 5px; border-top: #9aafe5 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #9aafe5 1px solid; color: #2e6ab1; margin-right: 2px; padding-top: 2px; border-bottom: #9aafe5 1px solid; text-decoration: none
}
div.sabrosus a:hover {
 border-right: #2b66a5 1px solid; border-top: #2b66a5 1px solid; border-left: #2b66a5 1px solid; color: #000; border-bottom: #2b66a5 1px solid; background-color: lightyellow
}
div.pagination a:active {
 border-right: #2b66a5 1px solid; border-top: #2b66a5 1px solid; border-left: #2b66a5 1px solid; color: #000; border-bottom: #2b66a5 1px solid; background-color: lightyellow
}
div.sabrosus span.current {
 border-right: navy 1px solid; padding-right: 5px; border-top: navy 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: navy 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: navy 1px solid; background-color: #2e6ab1
}
div.sabrosus span.disabled {
 border-right: #929292 1px solid; padding-right: 5px; border-top: #929292 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #929292 1px solid; color: #929292; margin-right: 2px; padding-top: 2px; border-bottom: #929292 1px solid
}






jquery.autocomplete.js





 
$().ready(function() {
 if($("input[type=text]").hasClass('isearchSug')){ 
  $( ".isearchSug" ).iautocomplete("http://10.18.224.45:8080/lenovo/lenovo", {
    selectFirst: false,
    matchSubset:false,
    scroll:false
  });
 }
});
 
 
;(function($) {
 
$.fn.extend({
 iautocomplete: function(urlOrData, options) {
  var isUrl = typeof urlOrData == "string";
  options = $.extend({}, $.iAutocompleter.defaults, {
   url: isUrl "result", handler);
 },
 search: function(handler) {
  return this.trigger("search", [handler]);
 },
 flushCache: function() {
  return this.trigger("flushCache");
 },
 setOptions: function(options){
  return this.trigger("setOptions", [options]);
 },
 unautocomplete: function() {
  return this.trigger("unautocomplete");
 }
});
 
$.iAutocompleter = function(input, options) {
 
 var KEY = {
  UP: 38,
  DOWN: 40,
  DEL: 46,
  TAB: 9,
  RETURN: 13,
  ESC: 27,
  COMMA: 188,
  PAGEUP: 33,
  PAGEDOWN: 34,
  BACKSPACE: 8
 };
 
 // Create $ object for input element
 var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);
 
 var timeout;
 var previousValue = "";
 var cache = $.iAutocompleter.Cache(options);
 var hasFocus = 0;
 var lastKeyPressCode;
 var config = {
  mouseDownOnSelect: false
 };
 var select = $.iAutocompleter.Select(options, input, selectCurrent, config);
 
 var blockSubmit;
 
 // prevent form submit in opera when selecting with return key
 $.browser.opera && $(input.form).bind("submit.iautocomplete", function() {
  if (blockSubmit) {
   blockSubmit = false;
   return false;
  }
 });
 
 // only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
 $input.bind(($.browser.opera "keypress" : "keydown") + ".iautocomplete", function(event) {
  // a keypress means the input has focus
  // avoids issue where input had focus before the autocomplete was applied
  hasFocus = 1;
  // track last key pressed
  lastKeyPressCode = event.keyCode;
  switch(event.keyCode) {
  
   case KEY.UP:
    event.preventDefault();
    if ( select.visible() ) {
     select.prev();
    } else {
     onChange(0, true);
    }
    break;
    
   case KEY.DOWN:
    event.preventDefault();
    if ( select.visible() ) {
     select.next();
    } else {
     onChange(0, true);
    }
    break;
    
   case KEY.PAGEUP:
    event.preventDefault();
    if ( select.visible() ) {
     select.pageUp();
    } else {
     onChange(0, true);
    }
    break;
    
   case KEY.PAGEDOWN:
    event.preventDefault();
    if ( select.visible() ) {
     select.pageDown();
    } else {
     onChange(0, true);
    }
    break;
   
   // matches also semicolon
   case options.multiple && $.trim(options.multipleSeparator) == "," && KEY.COMMA:
   case KEY.TAB:
   case KEY.RETURN:
    if( selectCurrent() ) {
     // stop default to prevent a form submit, Opera needs special handling
     event.preventDefault();
     blockSubmit = true;
     return false;
    }
    break;
    
   case KEY.ESC:
    select.hide();
    break;
    
   default:
    clearTimeout(timeout);
    timeout = setTimeout(onChange, options.delay);
    break;
  }
 }).focus(function(){
  // track whether the field has focus, we shouldn't process any
  // results if the field no longer has focus
  hasFocus++;
 }).blur(function() {
  hasFocus = 0;
  if (!config.mouseDownOnSelect) {
   hideResults();
  }
 }).click(function() {
  // show select when clicking in a focused field
  if ( hasFocus++ > 1 && !select.visible() ) {
   onChange(0, true);
  }
 }).bind("search", function() {
  // TODO why not just specifying both arguments"function" ) fn(result);
   else $input.trigger("result", result && [result.data, result.value]);
  }
  $.each(trimWords($input.val()), function(i, value) {
   request(value, findValueCallback, findValueCallback);
  });
 }).bind("flushCache", function() {
  cache.flush();
 }).bind("setOptions", function() {
  $.extend(options, arguments[1]);
  // if we've updated the data, repopulate
  if ( "data" in arguments[1] )
   cache.populate();
 }).bind("input", function() { 
  onChange(0,true);
 }).bind("unautocomplete", function() {
  select.unbind();
  $input.unbind();
  $(input.form).unbind(".iautocomplete");
 }).bind("change", function() {
  $input.search(
   function (result){
    $input.trigger("result", result && [result.data, result.value]);
   }
  );
 });
 
 
 function selectCurrent() {
  var selected = select.selected();
  if( !selected )
   return false;
  
  var v = selected.result;
  previousValue = v;
  
  if ( options.multiple ) {
   var words = trimWords($input.val());
   if ( words.length > 1 ) {
    var seperator = options.multipleSeparator.length;
    var cursorAt = $(input).selection().start;
    var wordAt, progress = 0;
    $.each(words, function(i, word) {
     progress += word.length;
     if (cursorAt <= progress) {
      wordAt = i;
      return false;
     }
     progress += seperator;
    });
    words[wordAt] = v;
    // TODO this should set the cursor to the right position, but it gets overriden somewhere
    //$.Autocompleter.Selection(input, progress + seperator, progress + seperator);
    v = words.join( options.multipleSeparator );
   }
   v += options.multipleSeparator;
  }
  
  $input.val(v);
  hideResultsNow();
  $input.trigger("result", [selected.data, selected.value]);
  return true;
 }
 
 function onChange(crap, skipPrevCheck) {
  if( lastKeyPressCode == KEY.DEL ) {
   select.hide();
   return;
  }
  
  var currentValue = $input.val();
  
  if ( !skipPrevCheck && currentValue == previousValue )
   return;
  
  previousValue = currentValue;
  
  currentValue = lastWord(currentValue);
  if ( currentValue.length >= options.minChars) {
   $input.addClass(options.loadingClass);
   if (!options.matchCase)
    currentValue = currentValue.toLowerCase();
   request(currentValue, receiveData, hideResultsNow);
  } else {
   stopLoading();
   select.hide();
  }
 };
 
 function trimWords(value) {
  if (!value)
   return [""];
  if (!options.multiple)
   return [$.trim(value)];
  return $.map(value.split(options.multipleSeparator), function(word) {
   return $.trim(value).length ""));
  }
  return words[words.length - 1];
 }
 
 // fills in the input box w/the first match (assumed to be the best match)
 // q: the term entered
 // sValue: the first matching result
 function autoFill(q, sValue){
  // autofill in the complete box w/the first match as long as the user hasn't entered in more data
  // if the last user key pressed was backspace, don't autofill
  if( options.autoFill && (lastWord($input.val()).toLowerCase() == q.toLowerCase()) && lastKeyPressCode != KEY.BACKSPACE ) {
   // fill in the value (keep the case the user has typed)
   $input.val($input.val() + sValue.substring(lastWord(previousValue).length));
   // select the portion of the value not typed by the user (so the next character will erase)
   $(input).selection(previousValue.length, previousValue.length + sValue.length);
  }
 };
 
 function hideResults() {
  clearTimeout(timeout);
  timeout = setTimeout(hideResultsNow, 200);
 };
 
 function hideResultsNow() {
  var wasVisible = select.visible();
  select.hide();
  clearTimeout(timeout);
  stopLoading();
  if (options.mustMatch) {
   // call search and run callback
   $input.search(
    function (result){
     // if no value found, clear the input box
     if( !result ) {
      if (options.multiple) {
       var words = trimWords($input.val()).slice(0, -1);
       $input.val( words.join(options.multipleSeparator) + (words.length "") );
      }
      else {
       $input.val( "" );
       $input.trigger("result", null);
      }
     }
    }
   );
  }
 };
 
 function receiveData(q, data) {
  if ( data && data.length && hasFocus ) {
   stopLoading();
   select.display(data, q);
   autoFill(q, data[0].value);
   select.show();
  } else {
   hideResultsNow();
  }
 };
 
 function request(term, success, failure) {
  if (!options.matchCase)
   term = term.toLowerCase();
  var data = cache.load(term);
  // recieve the cached data
  if (data && data.length) {
   success(term, data);
  // if an AJAX url has been supplied, try loading the data now
  } else if( (typeof options.url == "string") && (options.url.length > 0) ){
   var extraParams = {
    timestamp: +new Date()
   };
   $.each(options.extraParams, function(key, param) {
    extraParams[key] = typeof param == "function" "abort",
    // limit abortion to this input
    port: "iautocomplete" + input.name,
    dataType: options.dataType,
    url: options.url,
    data: $.extend({
     q: lastWord(term),
     limit: options.max
    }, extraParams),
    success: function(data) {
     var parsed = options.parse && options.parse(data) || parse(data);
     cache.add(term, parsed);
     success(term, parsed);
    }
   });
  } else {
   // if we have a failure, we need to empty the list -- this prevents the the [TAB] key from selecting the last successful match
   select.emptyList();
   failure(term);
  }
 };
 
 function parse(data) {
  var parsed = [];
 // var rows = data.split("\n");
  
  if(data==null||data==""){
   return parsed;
  }
  var obj = eval(data);
  var arr = obj.lenovoWords;
  var rows = arr;
  
  for (var i=0; i < rows.length; i++) {
   var row = $.trim(rows[i]);
   if (row) {
    row = row.split("|");
    parsed[parsed.length] = {
     data: row,
     value: row[0],
     result: options.formatResult && options.formatResult(row, row[0]) || row[0]
    };
   }
  }
  return parsed;
 };
 function stopLoading() {
  $input.removeClass(options.loadingClass);
 };
};
$.iAutocompleter.defaults = {
 inputClass: "ac_input",
 resultsClass: "ac_results",
 loadingClass: "ac_loading",
 minChars: 1,
 delay: 400,
 matchCase: false,
 matchSubset: true,
 matchContains: false,
 cacheLength: 10,
 max: 100,
 mustMatch: false,
 extraParams: {},
 selectFirst: true,
 formatItem: function(row) { return row[0]; },
 formatMatch: null,
 autoFill: false,
 width: 0,
 multiple: false,
 multipleSeparator: ", ",
 highlight: function(value, term) {
  return value.replace(new RegExp("(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\"\\$1") + ")(", "gi"), "<strong>$1</strong>");
 },
 scroll: true,
 scrollHeight: 180
};
 
$.iAutocompleter.Cache = function(options) {
 
 var data = {};
 var length = 0;
 
 function matchSubset(s, sub) {
  if (!options.matchCase) 
   s = s.toLowerCase();
  var i = s.indexOf(sub);
  if (options.matchContains == "word"){
   i = s.toLowerCase().search("\\b" + sub.toLowerCase());
  }
  if (i == -1) return false;
  return i == 0 || options.matchContains;
 };
 
 function add(q, value) {
  if (length > options.cacheLength){
   flush();
  }
  if (!data[q]){ 
   length++;
  }
  data[q] = value;
 }
 
 function populate(){
  if( !options.data ) return false;
  // track the matches
  var stMatchSets = {},
   nullData = 0;
 
  // no url was specified, we need to adjust the cache length to make sure it fits the local data store
  if( !options.url ) options.cacheLength = 1;
  
  // track all options for minChars = 0
  stMatchSets[""] = [];
  
  // loop through the array and create a lookup structure
  for ( var i = 0, ol = options.data.length; i < ol; i++ ) {
   var rawValue = options.data[i];
   // if rawValue is a string, make an array otherwise just reference the array
   rawValue = (typeof rawValue == "string") ""].push(row);
   }
  };
  // add the data items to the cache
  $.each(stMatchSets, function(i, value) {
   // increase the cache size
   options.cacheLength++;
   // add to the cache
   add(i, value);
  });
 }
 
 // populate any existing data
 setTimeout(populate, 25);
 
 function flush(){
  data = {};
  length = 0;
 }
 
 return {
  flush: flush,
  add: add,
  populate: populate,
  load: function(q) {
   if (!options.cacheLength || !length)
    return null;
   /* 
    * if dealing w/local data and matchContains than we must make sure
    * to loop through all the data collections looking for matches
    */
   if( !options.url && options.matchContains ){
    // track all matches
    var csub = [];
    // loop through all the data grids for matches
    for( var k in data ){
     // don't search through the stMatchSets[""] (minChars: 0) cache
     // this prevents duplicates
     if( k.length > 0 ){
      var c = data[k];
      $.each(c, function(i, x) {
       // if we've got a match, add it to the array
       if (matchSubset(x.value, q)) {
        csub.push(x);
       }
      });
     }
    }    
    return csub;
   } else 
   // if the exact item exists, use it
   if (data[q]){
    return data[q];
   } else
   if (options.matchSubset) {
    for (var i = q.length - 1; i >= options.minChars; i--) {
     var c = data[q.substr(0, i)];
     if (c) {
      var csub = [];
      $.each(c, function(i, x) {
       if (matchSubset(x.value, q)) {
        csub[csub.length] = x;
       }
      });
      return csub;
     }
    }
   }
   return null;
  }
 };
};
 
$.iAutocompleter.Select = function (options, input, select, config) {
 var CLASSES = {
  ACTIVE: "ac_over"
 };
 
 var listItems,
  active = -1,
  data,
  term = "",
  needsInit = true,
  element,
  list;
 
 // Create results
 function init() {
  if (!needsInit)
   return;
  element = $("<div/>")
  .hide()
  .addClass(options.resultsClass)
  .css("position", "absolute")
  .appendTo(document.body);
 
  list = $("<ul/>").appendTo(element).mouseover( function(event) {
   if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
    active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
    $(target(event)).addClass(CLASSES.ACTIVE);   
   }
  }).click(function(event) {
   $(target(event)).addClass(CLASSES.ACTIVE);
   select();
   // TODO provide option to avoid setting focus again after selection"width", options.width);
   
  needsInit = false;
 } 
 
 function target(event) {
  var element = event.target;
  while(element && element.tagName != "LI")
   element = element.parentNode;
  // more fun with IE, sometimes event.target is empty, just ignore it then
  if(!element)
   return [];
  return element;
 }
 
 function moveSelect(step) {
  listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);
  movePosition(step);
  var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE);
  if(options.scroll) {
   var offset = 0;
   listItems.slice(0, active).each(function() {
    offset += this.offsetHeight;
   });
   if((offset + activeItem[0].offsetHeight - list.scrollTop()) > list[0].clientHeight) {
    list.scrollTop(offset + activeItem[0].offsetHeight - list.innerHeight());
   } else if(offset < list.scrollTop()) {
    list.scrollTop(offset);
   }
  }
 };
 
 function movePosition(step) {
  active += step;
  if (active < 0) {
   active = listItems.size() - 1;
  } else if (active >= listItems.size()) {
   active = 0;
  }
 }
 
 function limitNumberOfItems(available) {
  return options.max && options.max < available
   "<li/>").html( options.highlight(formatted, term) ).addClass(i%2 == 0 "ac_even" : "ac_odd").appendTo(list)[0];
   $.data(li, "ac_data", data[i]);
  }
  listItems = list.find("li");
  if ( options.selectFirst ) {
   listItems.slice(0, 1).addClass(CLASSES.ACTIVE);
   active = 0;
  }
  // apply bgiframe if available
  if ( $.fn.bgiframe )
   list.bgiframe();
 }
 
 return {
  display: function(d, q) {
   init();
   data = d;
   term = q;
   fillList();
  },
  next: function() {
   moveSelect(1);
  },
  prev: function() {
   moveSelect(-1);
  },
  pageUp: function() {
   if (active != 0 && active - 8 < 0) {
    moveSelect( -active );
   } else {
    moveSelect(-8);
   }
  },
  pageDown: function() {
   if (active != listItems.size() - 1 && active + 8 > listItems.size()) {
    moveSelect( listItems.size() - 1 - active );
   } else {
    moveSelect(8);
   }
  },
  hide: function() {
   element && element.hide();
   listItems && listItems.removeClass(CLASSES.ACTIVE);
   active = -1;
  },
  visible : function() {
   return element && element.is(":visible");
  },
  current: function() {
   return this.visible() && (listItems.filter("." + CLASSES.ACTIVE)[0] || options.selectFirst && listItems[0]);
  },
  show: function() {
   var offset = $(input).offset();
   element.css({
    width: typeof options.width == "string" || options.width > 0 "undefined") {
     var listHeight = 0;
     listItems.each(function() {
      listHeight += this.offsetHeight;
     });
     var scrollbarsVisible = listHeight > options.scrollHeight;
     list.css('height', scrollbarsVisible "padding-left")) - parseInt(listItems.css("padding-right")) );
     }
    }
    
   }
  },
  selected: function() {
   var selected = listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE);
   return selected && selected.length && $.data(selected[0], "ac_data");
  },
  emptyList: function (){
   list && list.empty();
  },
  unbind: function() {
   element && element.remove();
  }
 };
};
 
$.fn.selection = function(start, end) {
 if (start !== undefined) {
  return this.each(function() {
   if( this.createTextRange ){
    var selRange = this.createTextRange();
    if (end === undefined || start == end) {
     selRange.move("character", start);
     selRange.select();
    } else {
     selRange.collapse(true);
     selRange.moveStart("character", start);
     selRange.moveEnd("character", end);
     selRange.select();
    }
   } else if( this.setSelectionRange ){
    this.setSelectionRange(start, end);
   } else if( this.selectionStart ){
    this.selectionStart = start;
    this.selectionEnd = end;
   }
  });
 }
 var field = this[0];
 if ( field.createTextRange ) {
  var range = document.selection.createRange(),
   orig = field.value,
   teststring = "<->",
   textLength = range.text.length;
  range.text = teststring;
  var caretAt = field.value.indexOf(teststring);
  field.value = orig;
  this.selection(caretAt, caretAt + textLength);
  return {
   start: caretAt,
   end: caretAt + textLength
  }
 } else if( field.selectionStart !== undefined ){
  return {
   start: field.selectionStart,
   end: field.selectionEnd
  }
 }
};
 
})(jQuery);






jquery.pagination.js





/**
 * This jQuery plugin displays pagination links inside the selected elements.
 *
 * @author Gabriel Birke (birke *at* d-scribe *dot* de)
 * @version 1.2
 * @param {int} maxentries Number of entries to paginate
 * @param {Object} opts Several options (see README for documentation)
 * @return {Object} jQuery Object
 */
jQuery.fn.pagination = function(maxentries, opts){
	opts = jQuery.extend({
		items_per_page:10,
		num_display_entries:10,
		current_page:0,
		num_edge_entries:0,
		link_to:"#",
		prev_text:"Prev",
		next_text:"Next",
		ellipse_text:"...",
		prev_show_always:true,
		next_show_always:true,
		callback:function(){return false;}
	},opts||{});
	
	return this.each(function() {
		/**
		 * 计算最大分页显示数目
		 */
		function numPages() {
			return Math.ceil(maxentries/opts.items_per_page);
		}	
		/**
		 * 极端分页的起始和结束点，这取决于current_page 和 num_display_entries.
		 * @返回 {数组(Array)}
		 */
		function getInterval() {
			var ne_half = Math.ceil(opts.num_display_entries/2);
			var np = numPages();
			var upper_limit = np-opts.num_display_entries;
			var start = current_page>ne_half""}, appendopts||{});
				if(page_id == current_page){
					var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");
				}else{
					var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
						.bind("click", getClickHandler(page_id))
						.attr('href', opts.link_to.replace(/__id__/,page_id));		
				}
				if(appendopts.classes){lnk.addClass(appendopts.classes);}
				panel.append(lnk);
			}
			// 产生"Previous"-链接
			if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
				appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
			}
			// 产生起始点
			if (interval[0] > 0 && opts.num_edge_entries > 0)
			{
				var end = Math.min(opts.num_edge_entries, interval[0]);
				for(var i=0; i<end; i++) {
					appendItem(i);
				}
				if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
				{
					jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
				}
			}
			// 产生内部的些链接
			for(var i=interval[0]; i<interval[1]; i++) {
				appendItem(i);
			}
			// 产生结束点
			if (interval[1] < np && opts.num_edge_entries > 0)
			{
				if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
				{
					jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
				}
				var begin = Math.max(np-opts.num_edge_entries, interval[1]);
				for(var i=begin; i<np; i++) {
					appendItem(i);
				}
				
			}
			// 产生 "Next"-链接
			if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
				appendItem(current_page+1,{text:opts.next_text, classes:"next"});
			}
		}
		
		//从选项中提取current_page
		var current_page = opts.current_page;
		//创建一个显示条数和每页显示条数值
		maxentries = (!maxentries || maxentries < 0)?1:maxentries;
		opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
		//存储DOM元素，以方便从所有的内部结构中获取
		var panel = jQuery(this);
		// 获得附加功能的元素
		this.selectPage = function(page_id){ pageSelected(page_id);}
		this.prevPage = function(){ 
			if (current_page > 0) {
				pageSelected(current_page - 1);
				return true;
			}
			else {
				return false;
			}
		}
		this.nextPage = function(){ 
			if(current_page < numPages()-1) {
				pageSelected(current_page+1);
				return true;
			}
			else {
				return false;
			}
		}
		// 所有初始化完成，绘制链接
		drawLinks();
  // 回调函数
  opts.callback(current_page, this);
	});
}






以上这篇jquery实现联想词搜索框和搜索结果分页的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接