图片截图显示不正常的话可以转到:
http://hi.baidu.com/yidwo/blog/item/3e2b44d4f8b87505a08bb766.html
用java+ajax做的一个类似于google输入栏版提示的ajax小功能.
稍改进了下.现在类似于163.126的邮件地址自动完成功能.
结构描述:
1.前台页面: autoComplete.js autoComplete.jsp
2.配置: 把web.xml文件的内容配置到你web工程的web.xml文件.
3.后台程序及源码: 在com文件夹下.
运行: 在tomcat中打开autoComplete.jsp,键入字符a , y ,g都可以弹出.
要想内容更丰富.
请您自己完善.
在IE和firefox 下测试通过.
演示截图:
IE:
Firefox:
// JavaScript Document
var xmlHttp;
var completeDiv;
var nameTable;
var nameTableBody;
var inputField;
var divIframe;
var isDivShow = false; //2007-12-23
var inTbodyLineNO = -1; //2007-12-23
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function initVars(){
nameTableBody = document.getElementById("name_table_body");
nameTable = document.getElementById("name_table");
completeDiv = document.getElementById("popup");
inputField = document.getElementById("names");
divIframe = document.getElementById("diviframe");
}
/* post html 页面 调用接口,此方法异步调用Servlet方法 AutoCompleteServlet */
function findNames(e){ //alert("00000");
initVars();
if(e.keyCode!=40 && e.keyCode!=38 && e.keyCode!=13 && e.keyCode!=27)
{
if(inputField.value.length > 0)
{
createXMLHttpRequest();
var url = "/AutoCompleteServlet";
var postPara = "names="+inputField.value;
postPara = encodeURI(postPara);
postPara = encodeURI(postPara);
xmlHttp.open("post",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(postPara);
xmlHttp.onreadystatechange = callback;
}else
{
clearNames();
}
}
}
/* setNames 方法处理返回回来的数据 */
function callback(){
if(xmlHttp.readyState == 4){ // alert("status: "+xmlHttp.status+" text: "+xmlHttp.statusText);
if(xmlHttp.status == 200){
setNames(xmlHttp.responseXML.getElementsByTagName("name"),xmlHttp.responseXML.getElementsByTagName("value"));
}else{
clearNames();
alert("Exception-status: "+xmlHttp.status+" text: "+xmlHttp.statusText);
}
}
}
function setNames(the_names,the_values){
clearNames();
var size = the_names.length; //alert(size);
setOffsets();
var row,cell,txtNode;
for(var i=0;i<size;i++){
isDivShow = true;
var nextNode = "\""+the_names[i].firstChild.data+"\" <"+the_values[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","#FFFAFA");
cell.setAttribute("border","0");
cell.onclick = function(){populateNames(this);};
divIframe.style.display="";
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
nameTableBody.appendChild(row);
if(inTbodyLineNO == -1)
{
inTbodyLineNO = 0;
nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOut";
}
}
}
// div 的显示位置设置
function setOffsets(){
var end = inputField.offsetWidth/2;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
nameTable.style.width = end + "px";
divIframe.style.border="none";
}
function calculateOffsetLeft(field){
return calculateOffset(field,"offsetLeft");
}
function calculateOffsetTop(field){
return calculateOffset(field,"offsetTop");
}
function calculateOffset(field,attr){
var offset = 0;
while(field){
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
// 对用户输入框取值 用户选择时调用
function populateNames(cell){
var oldInputValue = inputField.value.substring(0,inputField.value.lastIndexOf(",")+1);
var newInputValue = cell.firstChild.nodeValue;
if(oldInputValue.indexOf(newInputValue) > -1)
{
inputField.value = oldInputValue;
}else
{
inputField.value = oldInputValue + newInputValue+",";
}
clearNames();
}
// 清空操作
function clearNames(){
var ind = nameTableBody.childNodes.length;
for(var i = ind - 1; i >= 0; i--){
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
divIframe.style.display="none";
completeDiv.style.border = "none";
inTbodyLineNO = -1; //2007-12-23
isDivShow = false; //2007-12-23
}
function getKeyCode(oEvent)
{
/* if(oEvent.keyCode!=40 && oEvent.keyCode!=38 && oEvent.keyCode!=13 && oEvent.keyCode!=27)
{
//window.setTimeout("findNames()",2000);
findNames();
} */
if(isDivShow) // 如果自动完成的层显示出来了
{
if(oEvent.keyCode == 40)
{
MoveCursor(1);
}else if(oEvent.keyCode == 38) //
{
MoveCursor(-1);
}else if(oEvent.keyCode == 13) // enter
{
selectValue();
// oEvent.keyCode=9;
}else if(oEvent.keyCode == 27) // esc
{
clearNames();
}
}
}
//2007-12-23
function MoveCursor(nFlag)
{
var lineNum = nameTableBody.rows.length; //alert(lineNum);
nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOver";
inTbodyLineNO = (inTbodyLineNO + nFlag + lineNum) % lineNum;
nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOut";
nameTableBody.rows[inTbodyLineNO].cells[0].scrollIntoView(true);
}
//2007-12-23
function selectValue()
{
if(inTbodyLineNO == -1)
{
return;
}else
{
populateNames(nameTableBody.rows[inTbodyLineNO].cells[0]);
}
}
代码内有详细的注释.在这里就不详述.
分享到:
- 2007-12-25 18:12
- 浏览 3687
- 评论(2)
- 论坛回复 / 浏览 (-1 / 8426)
- 查看更多
相关推荐
基于Java+前端网页bootstrap+后端Java+Ajax+Servlet信息传送的图书管理系统源码+项目说明.zip基于Java+前端网页bootstrap+后端Java+Ajax+Servlet信息传送的图书管理系统源码+项目说明.zip基于Java+前端网页bootstrap...
Java+Ajax实现Google搜索引擎 Java+Ajax实现Google搜索引擎Java+Ajax实现Google搜索引擎Java+Ajax实现Google搜索引擎
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...基于ajax+jsp+servlet+mysql利用IDEA实现的图书管理系统源码+数据库.zip
基于Jquery+Ajax+Json实现分页显示附效果图
ajax+java+servlet+mysql 实现用户注册输入校验结课设计实例 有截图
主要用于三级联动,使用的html,ajax,后端用的原生servlet,或者你也可以根据自己的需要使用框架,毕竟只是做了数据库查询操作,返回的是json格式的数据,所以对后端要求不高,本资源为自己整理出来的,当然数据库...
React+ajax+java 上传图片并预览
基于JSP+Ajax+MyEclipse 2015 Java聊天室软件源码+说明文档 通过本课程设计的实践及其前后的准备与总结,复习、领会、巩固和运用软件工程课堂上所学的软件开发方法和知识,以此来完成Java聊天室的分析、设计、编码、...
java源码包实例源码JAVA开发源码50个合集: Ajax框架 ZK.rar ...类似QQ的聊天软件JAVA版源码(附设计文档).rar 进程通信.rar 连接postsql数据库的java代码.rar 附加数据库.rar 雷电游戏JAVA版源程序.rar
ajax+java servlet实现无刷新搜索实例(亲测可用) ,1.使用mysql数据库,已有sql语句;2.使用eclipse\MyEclipse导入项目即可;3.运行URL地址在doc/init.txt
java+jsp+ajax+mysql实现在线聊天,简单易懂,可自行添加复杂功能, 怕太过于复杂大家不容易看懂,就写的比较简单,可以根据需求添加复杂的功能,附带有数据库的执行代码,部署,修改一下文件中的数据库登陆密码就...
Ajax+Servlet+Java+JavaScript实现分页,这个方法相当方便,你绝对没想到!
NULL 博文链接:https://dsmart-30buy.iteye.com/blog/1485351
对Echarts3.0的基本图表实现,即饼图,折线图,柱状图。 从数据库读取数据显示在前台,图表可根据数据库数据实时更新。
servlet+ajax搜索提示。 仿Google Suggest,使用ajax技术实现动态获取搜索提示的功能,当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。
JSP+Ajax+Servlet 自动完成类似搜索,带数据库SQL Server文件,全面介绍Ajax的使用及方法
本例子采用弄AJAX和JSON格式的字符串 ,改变前台下拉列表的内容 不刷新页面自动将其他文本框赋值
java项目之基于Ajax+J2EE的MicroERP源码java项目之基于Ajax+J2EE的MicroERP源码java项目之基于Ajax+J2EE的MicroERP源码java项目之基于Ajax+J2EE的MicroERP源码java项目之基于Ajax+J2EE的MicroERP源码java项目之基于...
Ajax+DWR结合的模仿邮箱中草稿的自动保存,准备做一个邮箱或者需要有自动保存功能的可以借鉴一下啊
Java+ajax写的登录 Java+ajax写的登录 Java+ajax写的登录 Java+ajax写的登录 Java+ajax写的登录