容易的搜索输入框提示功能jsp+ajax
日期：2014-05-16 浏览次数：20372 次
简单的搜索输入框提示功能jsp+ajax
首先整体的思路是：HTML端由一个input和div组成，div的隐藏和显示实现下拉框提示，input的字符输入动作触发js的函数，通过ajax来与jsp通信，获得模糊查询结果，返回前台来显示。
首先整体的思路是：HTML端由一个input和div组成，div的隐藏和显示实现下拉框提示，input的字符输入动作触发js的函数，通过ajax来与jsp通信，获得模糊查询结果，返回前台来显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta content="text/html" charset="GBK" />
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script type="text/javascript">
// ajax.js
var XMLHttpReq;
var completeDiv;
var inputField;
var completeTable;
var completeBody;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var o//=============
if(window.XMLHttpRequest) { //Mozilla 浏览器
o = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
o = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
o = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return o;//=============
}
function findNames() {
inputField = document.getElementById("names");
completeTable = document.getElementById("complete_table");
completeDiv = document.getElementById("popup");
completeBody = document.getElementById("complete_body");
if (inputField.value.length > 0) {
var o=createXMLHttpRequest();
var url = "http://192.168.1.101/OAapp/jsp/index.jsp?names=" + escape(inputField.value);
//此处escape函数可以去掉，escape是采用ISO Latin字符集对指定的字符串进行编码。
o.open("GET", url, true);
o.onreadystatechange = function(){
if (o.readyState == 4) { // 判断对象状态
if (o.status == 200) { // 信息已经成功返回，开始处理信息
setNames(o.responseXML.getElementsByTagName("res"));
}else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
};//指定响应函数
o.send(null); // 发送请求
} else {
clearNames();
}
}
// 处理返回匹配信息函数
function processMatchResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
alert("XMLHttpReq.responseText"); //输出看是否有乱码===============
setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
}else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
//生成与输入内容匹配行
function setNames(names) {
clearNames();
var size = names.length;
setOffsets();
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {
this.className='mouseOver';
};
cell.onmouseover = function() {
this.className='mouseOut';
};
cell.setAttribute("bgcolor", "#ffddcc");
cell.setAttribute("border", "0");
cell.setAttribute("width",inputField.offsetWidth+"px");
cell.onclick = function() {
completeField(this);
} ;
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
completeBody.appendChild(row);
}
}
//设置显示位置
function setOffsets() {
completeTable.style.width = "auto"; //显示自动完成的提示框宽度自动伸展或缩小
gettable(inputField);
}
//取绝对位置
function getAbsPosition(obj) {
var r = {
left: obj.offsetLeft,
top : obj.offsetTop
};
r.left = obj.offsetLeft;
r.top = obj.offsetTop;
if(obj.offsetParent) {
var tmp = getAbsPosition(obj.offsetParent);
r.left += tmp.left;
r.top += tmp.top;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
