站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
Ajax- 提供自动完成
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[Ajax学习教程#Ajax学习教程|上一页]] | {{template:开发语言导航}}</span> <div style="clear:both;"></div> 我们遇到的最受欢迎的功能之一就是自动完成。许多人都使用过Intuit的Quicken之类的工具,并对其注册表的功能很是着迷,它的注册表能根据以前的注册项填入信息。这就使得数据输入更快、更容易,而且不容易出错。对于胖客户应用,增加这个功能可能很容易,但是Web应用长期以来一直都没有这个特性[1]。不过,Google在其beta实验区推出Google Suggest后,证明了自动完成对于Web应用并非遥不可及。 <br> Google Suggest实在让人赞叹不已(见图4-16)。它不仅很好地放置了下拉区,还会在输入框中自动插入最有可能的答案,并将非用户键入的部分置灰,在下拉区中甚至还能使用向上和向下箭头。由于为给定项提供了一些结果,用户就能更清楚地认识到具体完成搜索时可能会得到的结果。<br> 许多网站都对Google Suggest做了剖析(可以在google上查Google Suggest!)。代码清单4-17所示的例子比不上Google Suggest那么丰富,但你确实能从中了解到利用Ajax可以做些什么。需要注意,在这个例子中,callback()函数除了查找一般的返回码200,还会查找返回码204。204响应码指示服务器没有发回任何信息,利用个提示可以清空名字下拉区。你还会注意到,通过点记法为单元格设置鼠标事件,这一点在前面的“为什么不能用setAttribute方法来设置Delete按钮的事件处理程序?”旁注中已经解释过。重申一次,使用calculateOffset()方法来确定应该把数据放在哪个位置。<br> [[Image:image016.jpg]] 图4-16 Ajax为Google Suggest增色不少<br> 代码清单4-17 autoComplete.html<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> <html><br> <head><br> <title>Ajax Auto Complete</title><br> <style type="text/css"><br> .mouseOut {<br> background: #708090;<br> color: #FFFAFA;<br> }<br> .mouseOver {<br> background: #FFFAFA;<br> color: #000000;<br> }<br> </style>v <script type="text/javascript"><br> var xmlHttp;<br> var completeDiv;<br> var inputField;<br> var nameTable;<br> var nameTableBody;<br> function createXMLHttpRequest() {<br> if (window.ActiveXObject) {<br> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br> }<br> else if (window.XMLHttpRequest) {<br> xmlHttp = new XMLHttpRequest();<br> }<br> }<br> function initVars() {<br> inputField = document.getElementById("names");<br> nameTable = document.getElementById("name_table");<br> completeDiv = document.getElementById("popup");<br> nameTableBody = document.getElementById("name_table_body");<br> }<br> function findNames() {<br> initVars();<br> if (inputField.value.length > 0) {<br> createXMLHttpRequest();<br> var url = "AutoCompleteServlet?names=" + escape(inputField.value);<br> xmlHttp.open("GET", url, true);<br> xmlHttp.onreadystatechange = callback;<br> xmlHttp.send(null);<br> } else {<br> clearNames();<br> }<br> }<br> function callback() {<br> if (xmlHttp.readyState == 4) {<br> if (xmlHttp.status == 200) {<br> var name =<br> xmlHttp.responseXML<br> .getElementsByTagName("name")[0].firstChild.data;<br> setNames(xmlHttp.responseXML.getElementsByTagName("name"));<br> } else if (xmlHttp.status == 204){<br> clearNames();<br> }<br> }<br> }<br> function setNames(the_names) {<br> clearNames();<br> var size = the_names.length;<br> setOffsets();<br> var row, cell, txtNode;<br> for (var i = 0; i < size; i++) {<br> var nextNode = the_names[i].firstChild.data;<br> row = document.createElement("tr");<br> cell = document.createElement("td");<br> cell.onmouseout = function() {this.className='mouseOver';};<br> cell.onmouseover = function() {this.className='mouseOut';};<br> cell.setAttribute("bgcolor", "#FFFAFA");<br> cell.setAttribute("border", "0");<br> cell.onclick = function() { populateName(this); } ;<br> txtNode = document.createTextNode(nextNode);<br> cell.appendChild(txtNode);<br> row.appendChild(cell);<br> nameTableBody.appendChild(row);<br> }<br> }<br> function setOffsets() {<br> var end = inputField.offsetWidth;<br> var left = calculateOffsetLeft(inputField);<br> var top = calculateOffsetTop(inputField) + inputField.offsetHeight;<br> completeDiv.style.border = "black 1px solid";<br> completeDiv.style.left = left + "px";<br> completeDiv.style.top = top + "px";<br> nameTable.style.width = end + "px";<br> }<br> function calculateOffsetLeft(field) {<br> return calculateOffset(field, "offsetLeft");<br> }<br> function calculateOffsetTop(field) {<br> return calculateOffset(field, "offsetTop");<br> }<br> function calculateOffset(field, attr) {<br> var offset = 0;<br> while(field) {<br> offset += field[attr];<br> field = field.offsetParent;<br> }<br> return offset;<br> }<br> function populateName(cell) {<br> inputField.value = cell.firstChild.nodeValue;<br> clearNames();<br> }<br> function clearNames() {<br> var ind = nameTableBody.childNodes.length;<br> for (var i = ind - 1; i >= 0 ; i--) {<br> nameTableBody.removeChild(nameTableBody.childNodes[i]);<br> }<br> completeDiv.style.border = "none";<br> }<br> </script><br> </head><br> <body><br> <nowiki> <h1>Ajax Auto Complete Example</h1></nowiki><br> <nowiki>Names: <input type="text" size="20" id="names"</nowiki><br> <nowiki>onkeyup="findNames();" style="height:20;"/></nowiki><br> <nowiki><div style="position:absolute;" id="popup"></nowiki><br> <nowiki><table id="name_table" bgcolor="#FFFAFA" border="0"</nowiki><br> <nowiki>cellspacing="0" cellpadding="0"/></nowiki><br> <nowiki><tbody id="name_table_body"></tbody></nowiki><br> <nowiki></table></nowiki><br> <nowiki></div></nowiki><br> </body><br> </html><br> 服务器端代码模拟了命名服务的动态名字搜索功能。servlet中设置了一组名字,搜索委托给包含有查找逻辑的另一个类。注意,如果没有找到任何数据,要向客户返回响应,指示没有内容。代码清单4-18显示了AutoCompleteServlet.java,代码清单4-19是NameSer- vice.java。<br> 代码清单4-18 AutoCompleteServlet.java<br> package ajaxbook.chap4;<br> import java.io.*;<br> import java.util.ArrayList;<br> import java.util.Iterator;<br> import java.util.List;<br> import javax.servlet.*;<br> import javax.servlet.http.*;<br> public class AutoCompleteServlet extends HttpServlet {<br> private List names = new ArrayList();<br> public void init(ServletConfig config) throws ServletException {<br> names.add("Abe");<br> names.add("Abel");<br> names.add("Abigail");<br> names.add("Abner");<br> names.add("Abraham");<br> names.add("Marcus");<br> names.add("Marcy");<br> names.add("Marge");<br> names.add("Marie");<br> }<br> protected void doGet(HttpServletRequest request, HttpServletResponse response)<br> throws ServletException, IOException {<br> String prefix = request.getParameter("names");<br> NameService service = NameService.getInstance(names);<br> List matching = service.findNames(prefix);<br> if (matching.size() > 0) {<br> PrintWriter out = response.getWriter();<br> response.setContentType("text/xml");<br> response.setHeader("Cache-Control", "no-cache");<br> out.println("<response>");<br> Iterator iter = matching.iterator();<br> while(iter.hasNext()) {<br> String name = (String) iter.next();<br> out.println("<name>" + name + "</name>");v }<br> out.println("</response>");<br> matching = null;<br> service = null;<br> out.close();<br> } else {<br> response.setStatus(HttpServletResponse.SC_NO_CONTENT);<br> }<br> }<br> } 代码清单4-19 NameService.java<br> package ajaxbook.chap4;<br> import java.util.ArrayList;<br> import java.util.Iterator;<br> import java.util.List;<br> public class NameService {<br> private List names;<br> /** Creates a new instance of NameService */<br> private NameService(List list_of_names) {<br> this.names = list_of_names;<br> }<br> public static NameService getInstance(List list_of_names) {<br> return new NameService(list_of_names);<br> }<br> public List findNames(String prefix) {<br> String prefix_upper = prefix.toUpperCase();<br> List matches = new ArrayList();<br> Iterator iter = names.iterator();<br> while(iter.hasNext()) {<br> String name = (String) iter.next();<br> String name_upper_case = name.toUpperCase();<br> if(name_upper_case.startsWith(prefix_upper)){<br> boolean result = matches.add(name);<br> }<br> }<br> return matches;<br> }<br> }<br> 图4-17显示了实际运行的自动完成示例。<br> [[Image:image017.jpg]] [[category:Ajax]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:开发语言导航
(
编辑
)