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仿微信聊天界面
May 06 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
JS如何生成动态列表
2020/09/22 Javascript
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Django中间件基础用法详解
2019/07/18 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
Python的两道面试题
2013/06/29 面试题
浙大毕业生自荐信
2014/01/26 职场文书
运动会入场式解说词
2014/02/18 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
技术比武方案
2014/05/19 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL