|
|
2008-05-22 07:48
| 只看楼主
树型|
收藏|
小
中
大
2#
jsp版本 Ajax自动完成 中文
我这个自动完成跟google suggest不一样。我重要有两个文本框。一个是输入名字。一个是输入身份证。根据输入的名字，自动显示相同名字的所有身份证。
lookup.jsp
<%@ page c language="java" import="java.sql.*" import="java.util.regex.*" import="search.db.*" import="bar.web.pub.*" errorPage="" %>
<HTML>
<HEAD>
<title>ajax自动提示</title>
<script language="javascript" src="../public/js/lookup.js"></script>
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
function lookup()
{ createXMLHttpRequest();
var name= document.getElementById('search').value;
var url="Lookup.shtml?S_KEHU_NAME="+name;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange=callback;
XMLHttpReq.send(null);
}
function callback()
{
if(XMLHttpReq.readyState == 4)
{
if(XMLHttpReq.status == 200)
{
mainLoop();
}else{
alert("Not able to retrieve description"+XMLHttpReq.statusText);
}
}
}
function mainLoop()
{
//val = escape(queryField.value);
val = document.getElementById('search').value;
if (lastVal != val)
{
var xmldoc=XMLHttpReq.responseXML.documentElement;
var xSel=xmldoc.getElementsByTagName('select');
showQueryDiv(xSel);
lastVal = val;
}
return true;
}
</script>
</HEAD>
<body >
<input type="text" name="search" id="search" autocomplete="off" value="">
<input type="text" name="S_Licence" id="S_Licence" autocomplete="off" value=""><br>
</body>
</HTML>lookup.js
// 下拉区背景色
var DIV_BG_COLOR = "#EEE";
// 高亮显示条目颜色
var DIV_HIGHLIGHT_COLOR = "CornflowerBlue";
// 字体
var DIV_FONT = "Arial";
// 下拉区内补丁大小
var DIV_PADDING = "2px";
// 下拉区边框样式
var DIV_BORDER = "1px solid Black";
//下拉区的宽度
var DIV_WIDTH = "150px";
//下拉区的字体大小
var DIV_F;
// 文本输入框
var queryField;
// 下拉区ID
var divName;
// IFrame名称
var ifName;
// 记录上次选择的值
var lastVal = "";
// 当前选择的值
var val = "";
// 显示结果的下拉区
var globalDiv;
// 下拉区是否设置格式的标记
var card;
var divFormatted = false;/**
InitQueryCode 函数必须在<body onload>事件的响应函数中调用,其中;
queryFieldName 为文本框控件的ID,
hiddenDivName 为显示下拉区div的ID
*/
function InitQueryCode (queryFieldName, hiddenDivName)
{
// 指定文本输入框的onblur 和 onkeydown 响应函数
queryField = document.getElementById(queryFieldName);
//queryField.onblur = hideDiv;
//queryField.onkeydown = keypressHandler;
// 设置 queryField 的 autocomplete 属性为"off"
queryField.autocomplete = "off";
// 如果没有指定的hiddenDivName,取默认值"querydiv"
if (hiddenDivName)
{
divName = hiddenDivName;
}
else
{
divName = "querydiv";
}
// IFrame 的 name
ifName = "queryiframe";}/**
获取下拉区的div,如果没有则创建
*/
function getDiv (divID)
{
if(!globalDiv)
{
// 如果div 在页面中不存在,创建一个新的div
if(!document.getElementById(divID))
{
var newNode = document.createElement("div");
newNode.setAttribute("id",divID);
document.body.appendChild(newNode);
}
// globalDiv设置为div 的引用
globalDiv = document.getElementById(divID);
// 计算div左上角的位置
card= document.getElementById("S_Licence");
var x = card.offsetLeft;
var y = card.offsetTop + card.offsetHeight;
var parent = card;
while (parent.offsetParent)
{
parent = parent.offsetParent;
x += parent.offsetLeft;
y += parent.offsetTop;
}
// 如果没有对div 设置格式,则为其设置相应的显示样式
if(!divFormatted)
{
globalDiv.style.backgroundColor = DIV_BG_COLOR;
globalDiv.style.fontFamily = DIV_FONT;
globalDiv.style.padding = DIV_PADDING;
globalDiv.style.border = DIV_BORDER;
globalDiv.style.width = DIV_WIDTH;
globalDiv.style.fontSize = DIV_FONTSIZE;
globalDiv.style.position = "absolute";
globalDiv.style.left = x + "px";
globalDiv.style.top = y + "px";
globalDiv.style.visibility = "hidden";
globalDiv.style.zIndex = 10000;
divFormatted = true;
}
}
return globalDiv;
}/**
根据返回的结果集显示下拉区
*/
function showQueryDiv (resultArray)
{
// 获取div 的引用
var div = getDiv (divName);
// 如果div中有内容,则删除
while (div.childNodes.length > 0)
{
div.removeChild(div.childNodes[0]);
}
// 依次添加结果
for (var i = 0; i < resultArray.length; i++)
{
//每一个结果也是一个div
var result = document.createElement("div");
// 设置结果div的显示样式
result.style.cursor = "pointer";
result.style.padding = "2px 0px 2px 0px";
// 设置为未选中
_unhighlightResult(result);
// 设置鼠标移进,移出等事件响应函数
result.onmousedown = selectResult;
result.onmouseover = highlightResult;
result.onmouseout = unhighlightResult;
// 结果的文本是一个span
var result1 = document.createElement("span");
// 设置文本span的显示样式
result1.className = "result1";
result1.style.textAlign = "left";
result1.style.f;
result1.innerHTML = resultArray.childNodes[0].firstChild.nodeValue;;
// 将span添加为结果div的子节点
result.appendChild(result1);
// 将结果div添加为下拉区的子节点
div.appendChild(result);
}
// 如果结果集不为空,则显示,否则不显示
showDiv(resultArray.length > 0);
}/**
用户单击某个结果时,将文本框的内容替换为结果的文本,
并隐藏下拉区
*/
function selectResult()
{
_selectResult(this);
}// 选择一个条目
function _selectResult(item)
{
var spans = item.getElementsByTagName("span");
if (spans)
{
for (var i = 0; i < spans.length; i++)
{
if (spans.className == "result1")
{
card.value = spans.innerHTML;
lastVal = val = escape(card.value);
mainLoop();
card.focus();
showDiv(false);
return;
}
}
}
}/**
当鼠标移到某个条目之上时,高亮显示该条目
*/
function highlightResult()
{
_highlightResult(this);
}// 高亮显示条目
function _highlightResult(item)
{
item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;
}/**
当鼠标移出某个条目时,正常显示该条目
*/
function unhighlightResult()
{
_unhighlightResult(this);
}// 正常显示条目
function _unhighlightResult(item)
{
item.style.backgroundColor = DIV_BG_COLOR;
}/**
显示/不显示下拉区
*/
function showDiv(show)
{
var div = getDiv(divName);
if (show)
{
div.style.visibility = "visible";
}
else
{
div.style.visibility = "hidden";
}
adjustiFrame();
}/**
隐藏下拉区
*/
function hideDiv ()
{
showDiv(false);
}/**
调整IFrame的位置,这是为了div 可能会显示在输入框后面的问题
*/
function adjustiFrame()
{
// 如果没有IFrame,则创建
if (!document.getElementById(ifName))
{
var newNode = document.createElement("iFrame");
newNode.setAttribute("id",ifName);
newNode.setAttribute("src","javascript:false;");
newNode.setAttribute("scrolling","no");
newNode.setAttribute("frameborder","0");
document.body.appendChild (newNode);
}
iFrameDiv = document.getElementById (ifName);
var div = getDiv (divName);
// 调整IFrame的位置与div重合,并在div的下一层
try
{
iFrameDiv.style.position = "absolute";
iFrameDiv.style.width = div.offsetWidth;
iFrameDiv.style.height = div.offsetHeight;
iFrameDiv.style.top = div.style.top;
iFrameDiv.style.left = div.style.left;
iFrameDiv.style.zIndex = div.style.zIndex - 1;
iFrameDiv.style.visibility = div.style.visibility;
}
catch(e)
{
}
}/**
文本输入框的onkeydown响应函数
*/
function keypressHandler (evt)
{
// 获取对下拉区的引用
var div = getDiv(divName);
// 如果下拉区不显示则什么也不做
if(div.style.visibility == "hidden")
{
return true;
}
// 确保evt是一个有效的事件
if (!evt && window.event)
{
evt = window.event;
}
var key = evt.keyCode;
var KEYUP = 38;
var KEYDOWN = 40;
var KEYENTER = 13;
var KEYTAB = 9;
// 只处理上下键,回车键和Tab键的响应
if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))
{
return true;
}
var selNum = getSelectedSpanNum(div);
var selSpan = setSelectedSpan(div,selNum);
// 如果键入回车和Tab,则选择当前选择条目
if ((key == KEYENTER) || (key == KEYTAB))
{
if (selSpan)
{
_selectResult(selSpan);
}
}
else
{
if (key == KEYUP)
{
selSpan = setSelectedSpan (div,selNum - 1);
}
if (key == KEYDOWN)
{
selSpan = setSelectedSpan (div,selNum + 1);
}
if (selSpan)
{
_highlightResult(selSpan);
}
}
// 显示下拉区
showDiv(true);
return true;
}/**
获取当前选中的条目的序号
*/
function getSelectedSpanNum(div)
{
var Count = -1;
var spans = div.getElementsByTagName("div");
if (spans)
{
for (var i = 0; i < spans.length; i++)
{
Count++;
if (spans.style.backgroundColor != div.style.backgroundColor)
{
return Count;
}
}
}
return -1;
}/**
选择指定序号的结果条目
*/
function setSelectedSpan(div, spanNum)
{
var count = -1;
var thisSpan;
var spans = div.getElementsByTagName("div");
if(spans)
{
for(var i = 0; i < spans.length; i++)
{
if(++count == spanNum)
{
_highlightResult(spans);
thisSpan = spans;
}
else
{
_unhighlightResult(spans);
}
}
}
return thisSpan;
}/**
回车当tab键
*/
function document.onkeydown()
{
if (event.keyCode == 13)
event.keyCode = 9;
} 后台Lookup.java
package com.jh.mysv;import com.jh.svlt.cBaseSvlt;
import com.jh.svlt.svlt_all;
import javax.servlet.http.HttpServletRequest;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import search.db.*;
import javax.servlet.http.*;
import java.io.IOException;
import javax.servlet.ServletException;public class Lookup extends cBaseSvlt { public void todo() {
//处理方法参数
String name = bar.web.pub.fun.isoToGBK(request.getParameter("S_KEHU_NAME"));
String sql = null;
StringBuffer xml = new StringBuffer("<?xml version=\"1.0\" encoding=\"GBK\" ?>"); xml.append("<selects>");
sql = "select S_KEHU_NAME,S_LICENCE";
sql += " from T_KEHU where S_KEHU_NAME like '%' || ? || '%'"; proc pr = new proc();
pr.addParam("1", param.TYPE_VARCHAR2, name, param.IN);
pr.setNotProc();
pr.setProcname(sql);
rowSet rs = pr.executeRowSet();
try {
while (rs.next()) {
//创建响应字串
xml.append("<select>");
xml.append("<text>" + rs.getString("S_LICENCE") + "</text>");
xml.append("</select>");
}
xml.append("</selects>");
response.setContentType("text/xml");
response.getWriter().write(xml.toString());
} catch (Exception e) {
System.out.println(e.getStackTrace());
}
}
}
 asp.net 最后编辑于 2008-05-22 07:49:03
|
