图片截图显示不正常的话可以转到:
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
- 浏览 3731
- 评论(2)
- 论坛回复 / 浏览 (-1 / 8465)
- 查看更多
相关推荐
在提供的文档 `ajax+jquery实现类似百度搜索提示框.docx` 中,应该包含了完整的HTML、CSS和JavaScript代码,以及可能的PHP后端接口实现。这些代码将详细展示每个步骤的具体实现,帮助读者更好地理解Ajax和jQuery在...
基于Java+前端网页bootstrap+后端Java+Ajax+Servlet信息传送的图书管理系统源码+项目说明.zip基于Java+前端网页bootstrap+后端Java+Ajax+Servlet信息传送的图书管理系统源码+项目说明.zip基于Java+前端网页bootstrap...
【标题】"Ajax + JSON + Java" 是一种常见的前端与后端交互技术组合,用于实现网页的异步数据更新,无需整个页面刷新。Ajax(Asynchronous JavaScript and XML)是利用JavaScript进行局部页面更新的技术,而JSON...
在这个项目中,Echarts与AJAX和Java后端结合,利用MySQL数据库来实现动态的数据展示。接下来,我们将详细讨论这个实现过程中的关键知识点。 1. **Echarts图表库**: Echarts是一个基于SVG/VML/Canvas的高性能、跨...
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...基于ajax+jsp+servlet+mysql利用IDEA实现的图书管理系统源码+数据库.zip
"Jquery+Java实现类似开心网的头像缩放截取功能"是通过JavaScript库JQuery与后端Java技术相结合,为用户提供一个便捷、直观的头像裁剪体验,类似于社交网络开心网所采用的机制。这一功能的核心在于前端的图像操作和...
在这个项目中,我们将专注于"Java+Ajax实现Google搜索",这涉及到使用Java后端处理搜索请求,以及Ajax技术提供实时、无刷新的用户体验,类似于Google搜索引擎的功能。以下是相关知识点的详细说明: 1. **Java后端...
基于JSP+Ajax+MyEclipse 2015 Java聊天室软件源码+说明文档 通过本课程设计的实践及其前后的准备与总结,复习、领会、巩固和运用软件工程课堂上所学的软件开发方法和知识,以此来完成Java聊天室的分析、设计、编码、...
java源码包实例源码JAVA开发源码50个合集: Ajax框架 ZK.rar ...类似QQ的聊天软件JAVA版源码(附设计文档).rar 进程通信.rar 连接postsql数据库的java代码.rar 附加数据库.rar 雷电游戏JAVA版源程序.rar
标题 "Ajax+JSON 搜索框自动完成提示功能" 涉及的是网页开发中的一个常见技术,用于提高用户输入体验。Ajax(异步JavaScript和XML)是Web开发中的一种技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据...
ajax+java servlet实现无刷新搜索实例(亲测可用) ,1.使用mysql数据库,已有sql语句;2.使用eclipse\MyEclipse导入项目即可;3.运行URL地址在doc/init.txt
java+jsp+ajax+mysql实现在线聊天,简单易懂,可自行添加复杂功能, 怕太过于复杂大家不容易看懂,就写的比较简单,可以根据需求添加复杂的功能,附带有数据库的执行代码,部署,修改一下文件中的数据库登陆密码就...
文件列表中的`Ajax_Save`和`ajax+jsp草稿自动保存`可能包含了实现这一功能的具体代码示例,对进一步学习和实践大有裨益。 总之,理解和掌握Ajax+DWR的结合使用,对于提升Web应用的用户体验和性能至关重要。通过这种...
JavaMail 是一个开源库,它提供了在Java应用程序中发送和...这个项目展示了JavaMail、Ajax和JSP在实际应用中的融合,实现了邮箱验证这一常见的功能,对于初学者来说是很好的实践案例,有助于理解这些技术的综合运用。
该项目实现了仿豆瓣的在线博客系统,实现用户简单的登录注册,个人信息管理,好友关系管理,文章管理等功能,后端技术栈为Java+Servlet+tomcat+mysql+JSP,前端技术栈为HTML+CSS+JS+Ajax+Jquery。IDE是IntelliJ IDEA...
总结来说,"JSP+Ajax+Servlet 自动完成类似谷歌百度搜索"项目涵盖了Web开发的多个关键领域,包括前后端交互、数据库操作、用户体验设计等。通过实践这个项目,开发者可以深入理解这些技术的结合使用,以及如何构建...
AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码)-Ajax基础教程 by alixixi_com.mht
在本结课设计实例中,我们探讨了如何利用AJAX(Asynchronous JavaScript and XML)、Java Servlet、MySQL数据库技术,来实现一个用户注册功能,并且包含了输入校验的环节。这个项目旨在让学生掌握前后端交互的基本...
基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统...
本文将详细介绍如何使用jsp和ajax技术实现输入框自动搜索功能,类似于百度搜索。 一、标题:jsp+ajax实现输入框自动搜索 该标题表明该技术使用jsp和ajax实现输入框自动搜索功能。 二、描述:类似于百度的搜索一样...