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


Posted in jQuery onOctober 10, 2018

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);
       }
      });
     }
    }    
    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? useful for cleanup-on-focus
   input.focus();
   return false;
  }).mousedown(function() {
   config.mouseDownOnSelect = true;
  }).mouseup(function() {
   config.mouseDownOnSelect = false;
  });
  
  if( options.width > 0 )
   element.css("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
   ? options.max
   : available;
 }
 
 function fillList() {
  list.empty();
  var max = limitNumberOfItems(data.length);
  for (var i=0; i < max; i++) {
   if (!data[i])
    continue;
   var formatted = options.formatItem(data[i].data, i+1, max, data[i].value, term);
   if ( formatted === false )
    continue;
   var li = $("<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 ? options.width : $(input).width(),
    top: offset.top + input.offsetHeight,
    left: offset.left
   }).show();
   if(options.scroll) {
    list.scrollTop(0);
    list.css({
     maxHeight: options.scrollHeight,
     overflow: 'auto'
    });
    
    if($.browser.msie && typeof document.body.style.maxHeight === "undefined") {
     var listHeight = 0;
     listItems.each(function() {
      listHeight += this.offsetHeight;
     });
     var scrollbarsVisible = listHeight > options.scrollHeight;
     list.css('height', scrollbarsVisible ? options.scrollHeight : listHeight );
     if (!scrollbarsVisible) {
      // IE doesn't recalculate width when scrollbar disappears
      listItems.width( list.width() - parseInt(listItems.css("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?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
			var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
			return [start,end];
		}
		
		/**
		 * 分页链接事件处理函数
		 * @参数 {int} page_id 为新页码
		 */
		function pageSelected(page_id, evt){
			current_page = page_id;
			drawLinks();
			var continuePropagation = opts.callback(page_id, panel);
			if (!continuePropagation) {
				if (evt.stopPropagation) {
					evt.stopPropagation();
				}
				else {
					evt.cancelBubble = true;
				}
			}
			return continuePropagation;
		}
		
		/**
		 * 此函数将分页链接插入到容器元素中
		 */
		function drawLinks() {
			panel.empty();
			var interval = getInterval();
			var np = numPages();
			// 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。
			var getClickHandler = function(page_id) {
				return function(evt){ return pageSelected(page_id,evt); }
			}
			//辅助函数用来产生一个单链接(如果不是当前页则产生span标签)
			var appendItem = function(page_id, appendopts){
				page_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值
				appendopts = jQuery.extend({text:page_id+1, classes:""}, 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实现联想词搜索框和搜索结果分页的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 #jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 #jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
学习jQuery中的noConflict()用法
Sep 28 #jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 #jQuery
jQuery pjax 应用简单示例
Sep 20 #jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 #jQuery
You might like
php 注释规范
2012/03/29 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python实现拼图小游戏
2020/02/22 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
大学生两会精神学习心得体会
2014/03/10 职场文书
高中学生期末评语
2014/04/25 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
关于学习的决心书
2015/02/05 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
教师素质教育心得体会
2016/01/19 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Nginx实现会话保持的两种方式
2022/03/18 Servers