jquery实现联想词搜索框和搜索结果分页的示例

来源：动视网责编：小采时间：2020-11-27 22:06:31

jquery实现联想词搜索框和搜索结果分页的示例

jquery实现联想词搜索框和搜索结果分页的示例: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>

推荐度：

点击下载本文 文档为doc格式

导读jquery实现联想词搜索框和搜索结果分页的示例: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>

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="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript">
 
$(function(){
 
 $('.isearchSug').bind('keypress',function(event){
 if(event.keyCode == "13"){
 doSearch();
 }
 });
 
});
 
 
function page(page_id){
 var total = pageselectCallback(page_id);
 if(total==0){
 $("#Pagination").html(""); 
 }
 else{
 //调用分页函数，将分页插件绑定到id为Pagination的div上
 $("#Pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数 
 callback: pageselectCallback, //点击分页时，调用的回调函数
 prev_text: '<上一页', //显示上一页按钮的文本
 next_text: '下一页>', //显示下一页按钮的文本
 items_per_page:10, //每页显示的项数
 num_display_entries:6, //分页插件中间显示的按钮数目
 current_page:page_id, //当前页索引
 num_edge_entries:2 //分页插件左右两边显示的按钮数目
 
 });
 } 
}
 
//点击分页时调用的函数，page_id为当前页的索引
function pageselectCallback(pageIndex)
{
 var temp="";
 var total=0;
 var q = $("#isearch").val();
 var t = $("#type").val();
 alert(t);
 var p = pageIndex+1;
 // var p = pageIndex;
 $.ajax({
 async:false, 
 dataType: "json",
 type: "post",
 url: "http://10.18.224.102/edusearch/search/search",
 data: {
 "q":q,
 "t":t,
 "n":10,
 "p":p
 },
 //发送请求前，显示加载动画 
 beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()},
 //请求完毕后，隐藏加载动画
 complete:function(){$("#divload").hide();$("#datas #Pagination").show()},
 success: function(data,textStatus,jqXHR) {
 // alert(data);
 if(data!=null&&data!=""){
 var obj = eval(data);
 if(obj.retCode==0){
 var items = obj.items;
 // for(var i=0;i<items.length;i++){
 // if(items[i]!=null){
 // alert(items[i].name);
 // }
 // }
 var json=items;//json数据
 total=obj.total;//记录总数
 if(json==null||json==undefined){
 $("#datas").html(""); 
 }
 else{
 $.each(json,function(index,item){
 // temp+="<div id='datas' classdivclass=\"d_out\" onmouseover=\"this.className='d_over'\" "+
 // "onmouseout=\"this.className='d_out'\" style='padding: 10px 15px 12px 15px;'>"+
 // "<strong> <a style='font-size: 20px;font-famliy: 宋体;color:#333;' href='"+item.user_id+"' target='_blank'>"+
 // item.user_name+"</a></strong>"+
 // "<div style='font-size: 12px; font-famliy: 宋体; '>"+"part_id:"+item.part_id+" </div>"+
 // "<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+
 // "user_id:"+item.user_id+" </div></div><hr />";
 temp+=eval('(' + item + ')')+"<hr />"; 
 }); 
 $("#datas").html(temp); //将创建的新行附加在DIV中
 }
 }
 }
 },
 error : function() {
 alert("搜索失败！");
 }
 });
 
 return total;
}
 
function pageClick(pageIndex, total, spanInterval){
 var total = pageselectCallback(pageIndex);
 if(total!=0){
 var intPageIndex = parseInt(pageIndex);
 //创建分页 
 //将总记录数结果 得到 总页码数 
 var pageS = total; 
 if (pageS % 10 == 0) 
 pageS = pageS / 10; 
 else 
 pageS = parseInt(total / 10) + 1; 
 var $pager = $("#Pagination"); 
 //清楚分页div中的内容 
 $("#Pagination span").remove(); 
 $("#Pagination a").remove(); 
 //添加第一页 
 if (intPageIndex == 1) 
 $pager.append("<span class='disabled'>第一页</span>"); 
 else { 
 var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () { 
 pageClick($(this).attr('first'), total, spanInterval); 
 return false; 
 }); 
 $pager.append(first); 
 } 
 //添加上一页 
 if (intPageIndex == 1) 
 $pager.append("<span class='disabled'>上一页</span>"); 
 else { 
 var pre = $("<a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'>上一页</a>").click(function () { 
 pageClick($(this).attr('pre'), total, spanInterval); 
 return false; 
 }); 
 $pager.append(pre); 
 } 
 //设置分页的格式 这里可以根据需求完成自己想要的结果 
 var interval = parseInt(spanInterval); //设置间隔 
 var start = Math.max(1, intPageIndex - interval); //设置起始页 
 var end = Math.min(intPageIndex + interval, pageS)//设置末页 
 if (intPageIndex < interval + 1) { 
 end = (2 * interval + 1) > pageS ? pageS : (2 * interval + 1); 
 } 
 if ((intPageIndex + interval) > pageS) { 
 start = (pageS - 2 * interval) < 1 ? 1 : (pageS - 2 * interval); 
 } 
 //生成页码 
 for (var j = start; j < end + 1; j++) { 
 if (j == intPageIndex) { 
 var spanSelectd = $("<span class='current'>" + j + "</span>"); 
 $pager.append(spanSelectd); 
 } //if 
 else { 
 var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () { 
 pageClick($(this).text(), total, spanInterval); 
 return false; 
 }); 
 $pager.append(a); 
 } //else 
 } //for 
 //上一页 
 if (intPageIndex == total) { 
 $pager.append("<span class='disabled'>下一页</span>"); 
 } 
 else { 
 var next = $("<a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'>下一页</a>").click(function () { 
 pageClick($(this).attr("next"), total, spanInterval); 
 return false; 
 }); 
 $pager.append(next); 
 } 
 //最后一页 
 if (intPageIndex == pageS) { 
 $pager.append("<span class='disabled'>最后一页</span>"); 
 } 
 else { 
 var last = $("<a href='javascript:void(0)' last='" + pageS + "'>最后一页</a>").click(function () { 
 pageClick($(this).attr("last"), total, spanInterval); 
 return false; 
 }); 
 $pager.append(last); 
 }
 }
 
}
 
function doSearch(){
 // var total = pageselectCallback(1);
 // pageClick(1, total, 3);
 page(0);
}
 
 
</script>
 
</head>
 
<body>
 
<div id="content">
 
 <form autocomplete="off" action="result.jsp" method="post">
 <p>
 <label>search:</label>
 <input type="text" id="isearch" name="isearch" class="isearchSug"/>
 <select id="type" name="type">
 <option value="00">全部</option>
 <option value="01">用户</option>
 <option value="02">圈子</option>
 <option value="03">消息动态</option>
 <option value="04">门户</option>
 <option value="05">--资源--</option>
 <option value="0521"> -教案</option>
 <option value="0522"> -学案</option>
 <option value="0523"> -课件</option>
 <option value="0525"> -同步试卷</option>
 <option value="0526"> -录课通</option>
 <option value="0527"> -微视频</option>
 <option value="06">作业</option>
 <option value="07">问答</option>
 <option value="08">课程</option>
 <option value="09">问答</option>
 </select>
 <input type="submit" value="用户搜索"/>
 </p>
 </form>
 
 <div class="page">
 <div style="margin: 10px 0;"></div>
 <div id="datas">
 </div>
 <div id="divload" style="text-align: center">
 </div>
 <div id="Pagination" class="digg"></div>
 </div>
 
 </div>
 
</body>
</html>

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="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript">
 
$(function(){
	
 <%
 request.setCharacterEncoding("utf-8");
 String isearch = "";
 isearch = request.getParameter("isearch");
 
 
 if(isearch!=null&&isearch!=""){
 %>
 doSearch();
 <%
 }
 %>
 
 // $('.isearchSug').bind('keypress',function(event){
 // if(event.keyCode == "13"){
 // doSearch();
 // }
 // });
 
});
 
/**
* 对象转json数组
*/ 
function arrayToJson(o) { 
	var r = []; 
	if (o==undefined||o==null) return "null";
	if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\""; 
	if (typeof o == "object") { 
	if (!o.sort) { 
	for (var i in o) 
	r.push("\""+ i +"\""+ ":" + arrayToJson(o[i])); 
	if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) { 
	r.push("toString:" + o.toString.toString()); 
	} 
	r = "{" + r.join() + "}"; 
	} else { 
	for (var i = 0; i < o.length; i++) { 
	r.push(arrayToJson(o[i])); 
	} 
	r = "[" + r.join() + "]"; 
	} 
	return r; 
	} 
	return o.toString(); 
} 
 
 
function page(page_id){
 var total = pageselectCallback(page_id);
 if(total==0){
 	$("#Pagination").html(""); 
 }
 else{
 //调用分页函数，将分页插件绑定到id为Pagination的div上
 $("#Pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数 
	 callback: pageselectCallback, //点击分页时，调用的回调函数
	 prev_text: '<上一页', //显示上一页按钮的文本
	 next_text: '下一页>', //显示下一页按钮的文本
	 items_per_page:10, //每页显示的项数
	 num_display_entries:6, //分页插件中间显示的按钮数目
	 current_page:page_id, //当前页索引
	 num_edge_entries:2 //分页插件左右两边显示的按钮数目
	 
 });
 } 
}
 
//点击分页时调用的函数，page_id为当前页的索引
function pageselectCallback(pageIndex)
{
 var temp="";
 var total=0;
 var q = $("#isearch").val();
 var t = $("#type").val();;
 var p = pageIndex+1;
 // var p = pageIndex;
	$.ajax({
	 async:false, 
	 dataType: "json",
 type: "post",
 url: "http://10.18.224.102/edusearch/search/search",
 data: {
	 "q":q,
	 "t":t,
	 "n":10,
	 "p":p
 },
 //发送请求前，显示加载动画 
	 beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()},
	 //请求完毕后，隐藏加载动画
	 complete:function(){$("#divload").hide();$("#datas #Pagination").show()},
 success: function(data,textStatus,jqXHR) {
 // alert(data);
 if(data!=null&&data!=""){
	 var obj = eval(data);
	 if(obj.retCode==0){
	 var items = obj.items;
	 // for(var i=0;i<items.length;i++){
	 // if(items[i]!=null){
	 // alert(items[i].name);
	 // }
	 // }
	 var json=items;//json数据
 total=obj.total;//记录总数
 if(json==null||json==undefined){
 $("#datas").html(""); 
 }
 else{
	 $.each(json,function(index,item){
	 // 	temp+="<div id='datas' classdivclass=\"d_out\" onmouseover=\"this.className='d_over'\" "+
	 	//	"onmouseout=\"this.className='d_out'\" style='padding: 10px 15px 12px 15px;'>"+
	 	//	"<strong> <a style='font-size: 20px;font-famliy: 宋体;color:#333;' href='"+item.user_id+"' target='_blank'>"+
	 	//	 item.user_name+"</a></strong>"+
	 	//	 "<div style='font-size: 12px; font-famliy: 宋体; '>"+"part_id:"+item.part_id+" </div>"+
	 	//	 "<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+
	 	//	 "user_id:"+item.user_id+" </div></div><hr />";
	 	temp+=arrayToJson(item)+"<hr />"; 
	 }); 
	 $("#datas").html(temp); //将创建的新行附加在DIV中
	 }
	 }
 }
	 },
	 error : function() {
	 alert("搜索失败！");
	 }
	});
	
	return total;
}
 
function pageClick(pageIndex, total, spanInterval){
 var total = pageselectCallback(pageIndex);
 if(total!=0){
 var intPageIndex = parseInt(pageIndex);
 //创建分页 
 //将总记录数结果 得到 总页码数 
 var pageS = total; 
 if (pageS % 10 == 0) 
 pageS = pageS / 10; 
 else 
 pageS = parseInt(total / 10) + 1; 
 var $pager = $("#Pagination"); 
 //清楚分页div中的内容 
 $("#Pagination span").remove(); 
 $("#Pagination a").remove(); 
 //添加第一页 
 if (intPageIndex == 1) 
 $pager.append("<span class='disabled'>第一页</span>"); 
 else { 
 var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () { 
	 pageClick($(this).attr('first'), total, spanInterval); 
	 return false; 
 }); 
 $pager.append(first); 
 } 
 //添加上一页 
 if (intPageIndex == 1) 
 $pager.append("<span class='disabled'>上一页</span>"); 
 else { 
 var pre = $("<a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'>上一页</a>").click(function () { 
	 pageClick($(this).attr('pre'), total, spanInterval); 
	 return false; 
 }); 
 $pager.append(pre); 
 } 
 //设置分页的格式 这里可以根据需求完成自己想要的结果 
 var interval = parseInt(spanInterval); //设置间隔 
 var start = Math.max(1, intPageIndex - interval); //设置起始页 
 var end = Math.min(intPageIndex + interval, pageS)//设置末页 
 if (intPageIndex < interval + 1) { 
 end = (2 * interval + 1) > pageS ? pageS : (2 * interval + 1); 
 } 
 if ((intPageIndex + interval) > pageS) { 
 start = (pageS - 2 * interval) < 1 ? 1 : (pageS - 2 * interval); 
 } 
 //生成页码 
 for (var j = start; j < end + 1; j++) { 
 if (j == intPageIndex) { 
 var spanSelectd = $("<span class='current'>" + j + "</span>"); 
 $pager.append(spanSelectd); 
 } //if 
 else { 
 var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () { 
	 pageClick($(this).text(), total, spanInterval); 
	 return false; 
 }); 
 	$pager.append(a); 
 } //else 
 } //for 
 //上一页 
 if (intPageIndex == total) { 
 $pager.append("<span class='disabled'>下一页</span>"); 
 } 
 else { 
 var next = $("<a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'>下一页</a>").click(function () { 
	 pageClick($(this).attr("next"), total, spanInterval); 
	 return false; 
 }); 
 $pager.append(next); 
 } 
 //最后一页 
 if (intPageIndex == pageS) { 
 $pager.append("<span class='disabled'>最后一页</span>"); 
 } 
 else { 
 var last = $("<a href='javascript:void(0)' last='" + pageS + "'>最后一页</a>").click(function () { 
	 pageClick($(this).attr("last"), total, spanInterval); 
	 return false; 
 }); 
 $pager.append(last); 
 }
 }
 
}
 
function doSearch(){
 // var total = pageselectCallback(1);
 // pageClick(1, total, 3);
 page(0);
}
 
 
 
 
</script>
	
</head>
 
<body>
 
<div id="content">
	
	<form autocomplete="off" action="result.jsp" method="post">
	<p>
	<label>search:</label>
	<input type="text" id="isearch" name="isearch" class="isearchSug" value="<%=isearch%>"/>
	<select id="type" name="type">
	 <option value="00" <c:if test="${param.type=='00'}">selected</c:if>>全部</option>
	 <option value="01" <c:if test="${param.type=='01'}">selected</c:if>>用户</option>
	 <option value="02" <c:if test="${param.type=='02'}">selected</c:if>>圈子</option>
	 <option value="03" <c:if test="${param.type=='03'}">selected</c:if>>消息动态</option>
	 <option value="04" <c:if test="${param.type=='04'}">selected</c:if>>门户</option>
	 <option value="05" <c:if test="${param.type=='05'}">selected</c:if>>--资源--</option>
	 <option value="0521" <c:if test="${param.type=='0521'}">selected</c:if>> -教案</option>
	 <option value="0522" <c:if test="${param.type=='0522'}">selected</c:if>> -学案</option>
	 <option value="0523" <c:if test="${param.type=='0523'}">selected</c:if>> -课件</option>
	 <option value="0525" <c:if test="${param.type=='0525'}">selected</c:if>> -同步试卷</option>
	 <option value="0526" <c:if test="${param.type=='0526'}">selected</c:if>> -录课通</option>
	 <option value="0527" <c:if test="${param.type=='0527'}">selected</c:if>> -微视频</option>
	 <option value="06" <c:if test="${param.type=='06'}">selected</c:if>>作业</option>
	 <option value="07" <c:if test="${param.type=='07'}">selected</c:if>>问答</option>
	 <option value="08" <c:if test="${param.type=='08'}">selected</c:if>>课程</option>
	 <option value="09" <c:if test="${param.type=='09'}">selected</c:if>>问答</option>
	</select>
	<input type="submit" value="用户搜索"/>
	</p>
	</form>
	
	<div class="page">
	<div style="margin: 10px 0;"></div>
	<div id="datas">
	</div>
	<div id="divload" style="text-align: center">
	</div>
	<div id="Pagination" class="digg"></div>
 </div>
 
 </div>
	
</body>
</html>

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="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
 
</head>
<body>
 
<div id="content">
	
	<form>
	<p>
	<label>search:</label>
	<input type="text" class="isearchSug"/><input type="submit" value="Submit"/>
	</p>
	</form>
	
 </div>
</body>
</html>

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 ? urlOrData : null,
 data: isUrl ? null : urlOrData,
 delay: isUrl ? $.iAutocompleter.defaults.delay : 10,
 max: options && !options.scroll ? 10 : 150
 }, options);
 
 // if highlight is set to false, replace it with a do-nothing function
 options.highlight = options.highlight || function(value) { return value; };
 
 // if the formatMatch option is not specified, then use formatItem for backwards compatibility
 options.formatMatch = options.formatMatch || options.formatItem;
 
 return this.each(function() {
 new $.iAutocompleter(this, options);
 });
 },
 result: function(handler) {
 return this.bind("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?
 var fn = (arguments.length > 1) ? arguments[1] : null;
 function findValueCallback(q, data) {
 var result;
 if( data && data.length ) {
 for (var i=0; i < data.length; i++) {
 if( data[i].result.toLowerCase() == q.toLowerCase() ) {
 result = data[i];
 break;
 }
 }
 }
 if( typeof fn == "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 ? $.trim(word) : null;
 });
 }
 
 function lastWord(value) {
 if ( !options.multiple )
 return value;
 var words = trimWords(value);
 if (words.length == 1) 
 return words[0];
 var cursorAt = $(input).selection().start;
 if (cursorAt == value.length) {
 words = trimWords(value)
 } else {
 words = trimWords(value.replace(value.substring(cursorAt), ""));
 }
 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 ? options.multipleSeparator : "") );
 }
 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" ? param() : param;
 });
 $.ajax({
 // try to leverage ajaxQueue plugin to abort previous requests
 mode: "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(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$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") ? [rawValue] : rawValue;
 
 var value = options.formatMatch(rawValue, i+1, options.data.length);
 if ( value === false )
 continue;
 
 var firstChar = value.charAt(0).toLowerCase();
 // if no lookup array for this character exists, look it up now
 if( !stMatchSets[firstChar] ) 
 stMatchSets[firstChar] = [];
 // if the match is a string
 var row = {
 value: value,
 data: rawValue,
 result: options.formatResult && options.formatResult(rawValue) || value
 };
 
 // push the current match into the set list
 stMatchSets[firstChar].push(row);
 // keep track of minChars zero items
 if ( nullData++ < options.max ) {
 stMatchSets[""].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);
 }
 });
 }
 }

jquery实现联想词搜索框和搜索结果分页的示例

推荐度：

点击下载本文 文档为doc格式

标签：分页 jquery实 jquery实现联想词搜索框和搜索结果分页的示例

热门焦点

jquery实现联想词搜索框和搜索结果分页的示例

jquery实现联想词搜索框和搜索结果分页的示例

jquery实现联想词搜索框和搜索结果分页的示例

最新推荐

猜你喜欢

热门推荐