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

2020-05-17 06:28:06易采站长站整理

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++){