Ajax搜索提示效果含分页 (多浏览器支持)-优快云博客

本文介绍了一个使用JavaScript实现的搜索建议功能。该功能包括实时显示搜索建议列表、键盘导航选择建议项、翻页加载更多建议等功能。文章详细展示了如何通过监听输入框事件来触发AJAX请求获取建议，并使用DOM操作来动态更新页面上的建议列表。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
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);
}