用户名： 密码： 验证码：           网站地图  高级搜索  RSS订阅  收藏本站
您的位置:主页 > 网络编程 > Ajax >

实现基本Ajax技术 4.9 提供自动完成

[ 来源：csdn | 作者：不详 | 更新日期:2008-3-22 15:19:22 | 人气： | 评论 0 条 ]

　　我们遇到的最受欢迎的功能之一就是自动完成。许多人都使用过Intuit的Quicken之类的工具，并对其注册表的功能很是着迷，它的注册表能根据以前的注册项填入信息。这就使得数据输入更快、更容易，而且不容易出错。对于胖客户应用，增加这个功能可能很容易，但是Web应用长期以来一直都没有这个特性[1]。不过，Google在其beta实验区推出Google Suggest后，证明了自动完成对于Web应用并非遥不可及。 007网络教程网

　　Google Suggest实在让人赞叹不已（见图4-16）。它不仅很好地放置了下拉区，还会在输入框中自动插入最有可能的答案，并将非用户键入的部分置灰，在下拉区中甚至还能使用向上和向下箭头。由于为给定项提供了一些结果，用户就能更清楚地认识到具体完成搜索时可能会得到的结果。 hot007.com

　　许多网站都对Google Suggest做了剖析（可以在google上查Google Suggest！）。代码清单4-17所示的例子比不上Google Suggest那么丰富，但你确实能从中了解到利用Ajax可以做些什么。需要注意，在这个例子中，callback()函数除了查找一般的返回码200，还会查找返回码204。204响应码指示服务器没有发回任何信息，利用个提示可以清空名字下拉区。你还会注意到，通过点记法为单元格设置鼠标事件，这一点在前面的“为什么不能用setAttribute方法来设置Delete按钮的事件处理程序？”旁注中已经解释过。重申一次，使用calculateOffset()方法来确定应该把数据放在哪个位置。

文章来源于www.jc567.cn

Ajax基础教程（4）- 实现基本Ajax技术 4.9 提供自动完成 www.jc567.cn

　　图4-16 Ajax为Google Suggest增色不少

　　代码清单4-17 autoComplete.html

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
　　<html>
　　<head>
　　<title>Ajax Auto Complete</title>
　　<style type="text/css">
　　.mouseOut {
　　background: #708090;
　　color: #FFFAFA;
　　}
　　.mouseOver {
　　background: #FFFAFA;
　　color: #000000;
　　}
　　</style>
　　<script type="text/javascript">
　　var xmlHttp;
　　var completeDiv;
　　var inputField;
　　var nameTable;
　　var nameTableBody;
　　function createXMLHttpRequest() {
　　if (window.ActiveXObject) {
　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　else if (window.XMLHttpRequest) {
　　xmlHttp = new XMLHttpRequest();
　　}
　　}
　　function initVars() { www.hot007.com
　　inputField = document.getElementById("names");
　　nameTable = document.getElementById("name_table");
　　completeDiv = document.getElementById("popup");
　　nameTableBody = document.getElementById("name_table_body");
　　}
　　function findNames() {
　　initVars();
　　if (inputField.value.length > 0) {
　　createXMLHttpRequest();
　　var url = "AutoCompleteServlet?names=" + escape(inputField.value);
　　xmlHttp.open("GET", url, true);
　　xmlHttp.onreadystatechange = callback;
　　xmlHttp.send(null);
　　} else {
　　clearNames();
　　}
　　}
　　function callback() {
　　if (xmlHttp.readyState == 4) {
　　if (xmlHttp.status == 200) {
　　var name =
　　xmlHttp.responseXML
　　.getElementsByTagName("name")[0].firstChild.data;
　　setNames(xmlHttp.responseXML.getElementsByTagName("name"));

复制于jc567.cn


　　} else if (xmlHttp.status == 204){
　　clearNames();
　　}
　　}
　　}
　　function setNames(the_names) {
　　clearNames();
　　var size = the_names.length;
　　setOffsets();
　　var row, cell, txtNode;
　　for (var i = 0; i < size; i++) {
　　var nextNode = the_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", "#FFFAFA");
　　cell.setAttribute("border", "0");
　　cell.onclick = function() { populateName(this); } ;
　　txtNode = document.createTextNode(nextNode);
　　cell.appendChild(txtNode);
　　row.appendChild(cell);
　　nameTableBody.appendChild(row);
　　}
　　}
　　function setOffsets() { www.jc567.cn
　　var end = inputField.offsetWidth;
　　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";
　　}
　　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 populateName(cell) {
　　inputField.value = cell.firstChild.nodeValue;
　　clearNames();
　　}

复制于jc567.cn


　　function clearNames() {
　　var ind = nameTableBody.childNodes.length;
　　for (var i = ind - 1; i >= 0 ; i--) {
　　nameTableBody.removeChild(nameTableBody.childNodes[i]);
　　}
　　completeDiv.style.border = "none";
　　}
　　</script>
　　</head>
　　<body>
　　<h1>Ajax Auto Complete Example</h1>
　　Names: <input type="text" size="20" id="names"
　　onkeyup="findNames();" style="height:20;"/>
　　<div style="position:absolute;" id="popup">
　　<table id="name_table" bgcolor="#FFFAFA" border="0"
　　cellspacing="0" cellpadding="0"/>
　　<tbody id="name_table_body"></tbody>
　　</table>
　　</div>
　　</body>
　　</html>


共2页: 上一页 1 [2] 下一页
Tags：实现基本Ajax技术,提供自动完成
上一篇：实现基本Ajax技术 4.8 访问Web服务  下一篇：实现基本Ajax技术 4.9 小结
您的评论
用户名： （新注册） 密码： 匿名评论 [所有评论]

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为