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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
html中两种获取标签内的值的方法
Jun 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
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python函数嵌套实例
2014/09/23 Python
使用python实现tcp自动重连
2017/07/02 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
详解Python 解压缩文件
2019/04/09 Python
python3对接mysql数据库实例详解
2019/04/30 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python3判断IP地址的方法
2021/03/04 Python
十佳大学生村官事迹
2014/01/09 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
关键在于落实心得体会
2014/09/03 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Nginx进程调度问题详解
2021/09/25 Servers