`
jay88489
  • 浏览: 70565 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Ajax搜索提示效果含分页 (多浏览器支持)

阅读更多
var length = 0;
var menuFocusIndex = 0;
var mouseLocation = 0;
var activeObjId = "";

function toNextPage(valueStr){
	if(curpage>=totalpage){
	    return;
	}
	if($("suggest")!=null){
	    callSumbit(valueStr,curpage+1,pagesize);
	}
}

function toPreviousPage(valueStr){
	if(curpage<=1){
		return;
	}
	if($("suggest")!=null){
		callSumbit(valueStr,curpage-1,pagesize);
	}
}

function onFocusCall(objId){
	//set current page of active text element
	activeObjId = objId;
	//initialization mouse location of value
	if(mouseLocation==1){
		mouseLocation = 2;
		return;
	}
	//if it get focus then send ajax request
	var keyword = $(objId).value;
	callSumbit(keyword,curpage,pagesize);
}

function closeSuggest(){
	if (mouseLocation == 1){
            return;
    }else{
    	//mouseLocation=2;
    	menuFocusIndex = 0;
    }
	deleteElement($("suggest"));
}

function suggest(event,objId){
	var event = window.event || event;
	var keyNumber = event.keyCode;
	var keyword = $(objId).value;
	var temp = keyword.replace(/^\s+|\s+$/g,"");
	if(keyNumber =='40'){
	    event.returnValue=false;
	    forceMenuItem( menuFocusIndex+1 );
	    return true;
	}else if(keyNumber == '39'){
		toNextPage(keyword);
	    //"right"
	    return;
	}else if(keyNumber == '37'){
	    toPreviousPage(keyword);
	    //"left"
	    return;	    
	}else if(keyNumber == '38'){
	    event.returnValue=false;
	    forceMenuItem(menuFocusIndex-1);
	    return;
	}else if(keyNumber == '27'){
	    event.returnValue=false;					
		deleteElement($(objId));
		return;
	}else{
		if(temp.length==null || temp.length==length ){
			return ;
		}
		if(temp.length==0){
			deleteElement($("suggest"));
			length = 0;
			return;
		}
		length = temp.length;
		callSumbit(keyword,curpage,pagesize);
	}
}


function onTextKeyPress(event,objId){
	var event = window.event || event;
	var keyNumber = event.keyCode;
	//listen key down the enter and stop
	if(keyNumber == '13'){
		if($("suggest")!=null){
			setValueByIndex(menuFocusIndex,objId);
			var keyword = $(objId).value;
			if(keyword.length==null || keyword.length=="" ){
				return ;
			}
			length = keyword.length;
            event.returnValue = false;
            event.cancelBubble = true
	        event.stopPropagation();
	        event.preventDefault();
		}else{
			event.returnValue=true;
		}
	}
}

function createDiv(textObjId){
	var top = getPosition($(textObjId))[0]+$(textObjId).clientHeight;
	var left = getPosition($(textObjId))[1];
	var width = $(textObjId).clientWidth;
	var height = $(textObjId).clientHeight;
	var divMessage = document.createElement("div");
	divMessage.id =	"suggest";
	divMessage.style.position = "absolute";
	divMessage.style.left = (left)+"px";
	divMessage.style.top = (top+4)+"px";
	divMessage.style.width = width + "px";
	divMessage.style.backgroundColor = "#ffffff";
	divMessage.style.borderBottom = "1px solid #000000";
	divMessage.style.borderLeft = "1px solid #000000";
	divMessage.style.borderRight = "1px solid #000000";
	//mouseLocation =2;
	return divMessage;
}

function changeDivPosition(textObjId){
	var divMessage = $("suggest");
	if(divMessage==null)return;
	var top = getPosition($(textObjId))[0]+$(textObjId).clientHeight;
	var left = getPosition($(textObjId))[1];
	var width = $(textObjId).clientWidth;
	var height = $(textObjId).clientHeight;
	divMessage.style.position = "absolute";
	divMessage.style.left = (left)+"px";
	divMessage.style.top = (top+4)+"px";
	divMessage.style.width = width + "px";
	divMessage.style.backgroundColor = "#ffffff";
	divMessage.style.borderBottom = "1px solid #000000";
	divMessage.style.borderLeft = "1px solid #000000";
	divMessage.style.borderRight = "1px solid #000000";
}


function forceMenuItem(Index){
	if($("tableKey")==null)return;
   	var tableKey = $("tableKey").rows.length;
   	if(Index>tableKey){
		Index = 1;
   	}else if(Index<1){
   		Index = tableKey;
   	}
   	row = document.getElementById( "row" + Index );
   	oldRow = document.getElementById( "row" + menuFocusIndex );
	if(oldRow!= null ){
	    oldRow.style.backgroundColor="white";       
	  	oldRow.style.color="#000000";
	}
	if ( row != null ){
		row.style.backgroundColor="#dddddd";       
	    row.style.color="green";
		menuFocusIndex = Index;
	}
	if(Index==0){
			menuFocusIndex = Index;
	}
}

function setValueByIndex(index,objId){
	if($("row" + index)!=null){
		var cell = $("row" + index).cells[0].innerHTML;
        //$(objId).value = cell.replace("&","&");
        $(objId).value = cell.replace(" "," ");
        $(objId).focus();
    }
    deleteElement($("suggest"));
}

function setValueById(index,objId,hiddenObjId){
	if($("row" + index)!=null){
		var cellId = $("row" + index).cells[0].id;
		var cellHTML = $("row" + index).cells[0].innerHTML;
		$(objId).value = cellHTML
        $(objId).focus();
    }
    deleteElement($("suggest"));
}

function getPosition( obj ){ 
	var top = 0,left = 0;
	do{
   	top += obj.offsetTop;
       left += obj.offsetLeft;
	}while ( obj = obj.offsetParent );
	var arr = new Array();      
	arr[0] = top;
	arr[1] = left;   
	return arr;
}

function deleteElement(obj){
	if(obj!=null)
	document.body.removeChild(obj);
}



//implements part

var pagesize = 10;
var curpage = 1;
var totalcount = 0;
var totalpage = 0;

function parsePagination(pagination){
	pagesize = pagination.pageSize;
	curpage = pagination.curPage;
	totalcount = pagination.totalCount;
	totalpage = pagination.pageCount;
}

function callBackHand(value){
	parsePagination(value);
	parseResultXML(value.items,"objSuggestId");
}

function parseResultXML(elements,objId){
	var divMessage = $("suggest");
	deleteElement(divMessage);
	var NodeList = elements;
	
	divMessage = createDiv(objId);
	document.body.appendChild(divMessage);
	var tableHTML = "<table id=\"tableKey\" width=\"100%\">";
	for(var i=0;i<NodeList.length;i++){
		tableHTML += "<tr id=\"row"+(i+1)+"\" onmouseover=\"mouseLocation=1;forceMenuItem("+(i+1)+")\" onmouseout=\"mouseLocation=0;\" onclick=\"setValueByIndex("+(i+1)+",'"+objId+"')\"><td class=\"STYLE3\">" + NodeList[i].productName + "</td></tr>";	
	}
	if(NodeList.length<=0){
		tableHTML += "<tr><td class=\"STYLE3\"><div style=\"color:red;\">"+$("divMessageNotFound").innerHTML+"</div></td></tr>";	
		divMessage.innerHTML = tableHTML;
		return;
	}
	tableHTML += "</table>";
	var paginationHTML = "<table id=\"tableKey\" width=\"100%\"><tr onmouseover=\"mouseLocation=1;\" onmouseout=\"mouseLocation=0;\"><td class=\"STYLE3\">&nbsp;";
	var textValue = $(objId).value;
	if(curpage<=1){
		paginationHTML += "&lt;&nbsp;";
	}else{
		paginationHTML += "<a href=\"javascript:toPreviousPage('"+textValue+"');\">&lt;</a>&nbsp;";
	}
	if(curpage>=totalpage){
		paginationHTML += "&gt;&nbsp;";
	}else{
		paginationHTML += "<a href=\"javascript:toNextPage('"+textValue+"');\">&gt;</a>&nbsp;";
	}
	paginationHTML += "&nbsp;"+curpage + "/" + totalpage +"</td></tr></table>";
	//var createHTML = tableHTML + paginationHTML;
	divMessage.innerHTML = tableHTML + paginationHTML;
	if(menuFocusIndex==0)
	forceMenuItem(1);
	else
	forceMenuItem(menuFocusIndex);
}
 
分享到:
评论

相关推荐

    ajax 分页 ajax分页

    1. **SEO优化**:由于Ajax分页是异步加载的,对于搜索引擎爬虫来说,可能无法抓取到分页内容。可以使用服务器端渲染或Prerendering技术解决这个问题。 2. **浏览器兼容性**:虽然现代浏览器都支持XMLHttpRequest,但...

    Jquery Ajax分页(有实例)

    jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和XML)技术,可以实现动态、高效的分页效果。本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能...

    ajax分页

    **Ajax分页技术详解** 在Web开发中,为了提高用户体验,常常需要实现数据的分页显示,尤其是在处理大量数据时。Ajax(Asynchronous JavaScript and XML)分页是一种非刷新加载方式,它允许用户在不重新加载整个网页...

    基于 ajax 实现的分页查询

    六、Ajax库与框架支持 现代Web开发中,有许多库和框架提供了更高级的Ajax功能,例如jQuery的$.ajax,Vue.js的axios,React的fetch等,它们简化了Ajax请求的编写,提高了开发效率。 综上所述,基于Ajax的分页查询能...

    Ajax实现Java分页

    7. **优化用户体验**:为了提供更好的用户体验,可以添加一些额外的元素,如加载动画,显示错误提示,以及禁用分页按钮以防止在请求期间重复点击。 在提供的压缩包文件"AjaxPager"中,可能包含了实现以上步骤的示例...

    ajax假分页(J2ee)

    3. **兼容性检查**:确保代码在各种浏览器环境下都能正常工作,特别是对于不支持Ajax的老式浏览器。 4. **用户体验**:添加适当的加载提示,让用户知道数据正在加载,同时考虑在无更多数据时的提示处理。 总的来说...

    Ajax 搜索提示应用实例 含数据库演示

    4. **兼容性**:考虑到不同浏览器对Ajax的支持程度,可能需要使用像jQuery这样的库来处理兼容性问题。 总的来说,"ASP+Ajax 搜索提示应用实例"展示了如何结合服务器端编程语言、客户端JavaScript技术和数据库,构建...

    jquery+ajax分页

    结合AJAX技术,我们可以实现动态、无刷新的分页效果,提高用户体验。 **一、jQuery和AJAX基础** 1. **jQuery简介**:jQuery是由John Resig创建的一个JavaScript库,其目标是使JavaScript编程变得更简单、更快速。...

    ajax动态分页的DEMO

    在动态分页场景中,`ajax.js`会监听用户的分页操作(如点击分页按钮),然后使用`XMLHttpRequest`对象或者现代浏览器提供的`fetch` API向服务器发送异步请求,请求新的分页数据。请求的参数可能包括当前的页码、每页...

    前台分页Demo测试项目支持所有浏览器

    "前台分页Demo测试项目支持所有浏览器"这个标题暗示我们这是一个专门针对前端分页功能的示例项目,旨在展示如何在不同浏览器环境下实现分页效果。下面将详细介绍前台分页的相关知识点以及可能涉及的技术和实现方式。...

    ajax 分页ajax 分页ajax 分页

    **Ajax 分页技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在网页应用中,分页是一个常见的功能,它用于处理大量数据的显示,使得用户可以...

    Ajax.分页,使用AJAX技术对数据进行分页

    - **SEO问题**:由于Ajax分页的内容在初始页面加载时不被爬虫抓取,可能影响搜索引擎优化。解决方案包括使用服务器端渲染或提供JSON数据接口供搜索引擎爬取。 - **兼容性**:确保使用兼容各种浏览器的JavaScript...

    Ajax局部刷新分页

    - **兼容性检查**:确保代码兼容各种浏览器,包括那些不支持Ajax的旧版浏览器。 总的来说,Ajax局部刷新分页通过异步通信实现了页面的高效、平滑切换,减少了用户等待时间,提升了用户体验。在实际开发中,结合前端...

    Ajax无刷新带分页评论系统

    此外,考虑到不同浏览器的兼容性问题,我们可能需要使用jQuery或其他库来简化Ajax调用和DOM操作,这些库通常已经对各种浏览器进行了优化。同时,为了适应移动设备,我们需要确保系统在触屏设备上也能正常工作,可能...

    JAVA使用ajax实现了分页 jquery

    本教程将详细讲解如何使用Ajax和jQuery实现分页功能,同时也会探讨Ajax请求中的POST和GET方法的区别。 一、Ajax分页原理 Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下,通过...

    Ajax无刷新页面的分页技术的功能实现

    无刷新分页技术,尤其是基于Ajax(Asynchronous JavaScript and XML)的应用,已经成为提升用户体验的重要手段。Ajax分页技术允许用户在不重新加载整个页面的情况下,仅更新部分网页内容,从而实现更流畅、高效的...

    ajax无刷新和控件分页结合

    3. **Ajax请求**:使用`XMLHttpRequest`对象或者现代浏览器支持的`fetch` API发送异步请求,URL中携带当前页码信息,向服务器请求对应页的数据。 4. **服务器处理**:服务器接收到请求后,根据页码参数查询数据库,...

    AjaxPage实现分页

    **AjaxPage实现分页** 在Web开发中,用户界面的响应性和流畅性是提升用户体验的关键因素之一。传统的网页分页通常需要用户等待整个页面重新加载,这可能导致页面跳转时的延迟,影响用户体验。为了解决这个问题,...

    AJAX分页完整程序

    AJAX(Asynchronous JavaScript and XML)分页是结合了AJAX技术和分页概念的一种实现方式,使得用户无需刷新整个页面即可加载更多内容。在本篇文章中,我们将深入探讨AJAX分页的原理、实现方式以及如何在ASP环境下...

    ajax pro分页 非常标准的 写法 供学习

    2. Ajax请求:使用XMLHttpRequest对象(或现代浏览器中的fetch API)向服务器发送异步请求,请求通常包含当前页码和每页显示的记录数等参数。 3. 服务器处理:服务器根据请求参数返回相应的分页数据,通常是以JSON...

Global site tag (gtag.js) - Google Analytics