`
wangtong40
  • 浏览: 253889 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX基础教程-9 AutoComplete

阅读更多
java 代码
  1. package ajax.foundations_of_ajax;   
  2.   
  3. import java.io.IOException;   
  4. import java.io.PrintWriter;   
  5. import java.util.ArrayList;   
  6. import java.util.Iterator;   
  7. import java.util.List;   
  8.   
  9. import javax.servlet.ServletConfig;   
  10. import javax.servlet.ServletException;   
  11. import javax.servlet.http.HttpServlet;   
  12. import javax.servlet.http.HttpServletRequest;   
  13. import javax.servlet.http.HttpServletResponse;   
  14.   
  15. public class AutoCompleteServlet extends HttpServlet {   
  16.     private List names = new ArrayList();   
  17.   
  18.     public void init(ServletConfig config) throws ServletException {   
  19.         names.add("Abe");   
  20.         names.add("Abel");   
  21.         names.add("Abigail");   
  22.         names.add("Abner");   
  23.         names.add("Abraham");   
  24.         names.add("Marcus");   
  25.         names.add("Marcy");   
  26.         names.add("Marge");   
  27.         names.add("Marie");   
  28.     }   
  29.   
  30.     protected void doGet(HttpServletRequest request,   
  31.             HttpServletResponse response) throws ServletException, IOException {   
  32.         String prefix = request.getParameter("names");   
  33.         response.setCharacterEncoding("UTF-8");   
  34.         NameService service = NameService.getInstance(names);   
  35.         List matching = service.findNames(prefix);   
  36.         if (matching.size() > 0) {   
  37.             PrintWriter out = response.getWriter();   
  38.             response.setContentType("text/xml");   
  39.             response.setHeader("Cache-Control""no-cache");   
  40.             out.println("<response>");   
  41.             Iterator iter = matching.iterator();   
  42.             while (iter.hasNext()) {   
  43.                 String name = (String) iter.next();   
  44.                 out.println("<name>" + name + "</name>");   
  45.             }   
  46.             out.println("</response>");   
  47.             matching = null;   
  48.             service = null;   
  49.             out.close();   
  50.         } else {   
  51.             response.setStatus(HttpServletResponse.SC_NO_CONTENT);   
  52.         }   
  53.     }   
  54.   
  55. }   
js 代码
  1. <style type="text/css">   
  2. .mouseOut {   
  3. background: #708090;   
  4. color: #FFFAFA;   
  5. }   
  6. .mouseOver {   
  7. background: #FFFAFA;   
  8. color: #000000;   
  9. }   
  10. </style>   
  11. <script type="text/javascript">   
  12. var xmlHttp;   
  13. var completeDiv;   
  14. var inputField;   
  15. var nameTable;   
  16. var nameTableBody;   
  17.     //创建xmlHttp对象   
  18.     function createXMLHttpRequest() {   
  19.         if (window.ActiveXObject) {   
  20.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  21.         }   
  22.         else if (window.XMLHttpRequest) {   
  23.         xmlHttp = new XMLHttpRequest();   
  24.         }   
  25.     }   
  26.     //初始化变量   
  27.     function initVars() {   
  28.         inputField = document.getElementById("names");   
  29.         nameTable = document.getElementById("name_table");   
  30.         completeDiv = document.getElementById("popup");   
  31.         nameTableBody = document.getElementById("name_table_body");   
  32.     }   
  33.        
  34.     //查找姓名   
  35.     function findNames() {   
  36.         initVars();   
  37.         if (inputField.value.length > 0) {   
  38.             createXMLHttpRequest();   
  39.             var url = "AutoComplete?names=" + escape(inputField.value);   
  40.             xmlHttp.open("GET", url, true);   
  41.             xmlHttp.onreadystatechange = callback;   
  42.             xmlHttp.send(null);   
  43.         } else {   
  44.             clearNames();   
  45.         }   
  46.     }   
  47.        
  48.        
  49.     function callback() {   
  50.         if (xmlHttp.readyState == 4) {   
  51.             if (xmlHttp.status == 200) {   
  52.             var name =   
  53.             xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;   
  54.             setNames(xmlHttp.responseXML.getElementsByTagName("name"));   
  55.             } else if (xmlHttp.status == 204){   
  56.             clearNames();   
  57.             }   
  58.         }   
  59.     }   
  60.        
  61.        
  62.     function setNames(the_names) {   
  63.         clearNames();   
  64.         var size = the_names.length;   
  65.         setOffsets();   
  66.         var row, cell, txtNode;   
  67.         for (var i = 0; i < size; i++) {   
  68.             var nextNode = the_names[i].firstChild.data;   
  69.             row = document.createElement("tr");   
  70.             cell = document.createElement("td");   
  71.             cell.onmouseout = function() {this.className='mouseOver';};   
  72.             cell.onmouseover = function() {this.className='mouseOut';};   
  73.             cell.setAttribute("bgcolor""#FFFAFA");   
  74.             cell.setAttribute("border""0");   
  75.             cell.onclick = function() { populateName(this); } ;   
  76.             txtNode = document.createTextNode(nextNode);   
  77.             cell.appendChild(txtNode);   
  78.             row.appendChild(cell);   
  79.             nameTableBody.appendChild(row);   
  80.         }   
  81.     }   
  82.        
  83.   
  84.     function setOffsets() {   
  85.         var end = inputField.offsetWidth;   
  86.         var left = calculateOffsetLeft(inputField);   
  87.         var top = calculateOffsetTop(inputField) + inputField.offsetHeight;   
  88.         completeDiv.style.border = "black 1px solid";   
  89.         completeDiv.style.left = left + "px";   
  90.         completeDiv.style.top = top + "px";   
  91.         nameTable.style.width = end + "px";   
  92.     }   
  93.        
  94.     function calculateOffsetLeft(field) {   
  95.         return calculateOffset(field, "offsetLeft");   
  96.     }   
  97.        
  98.     function calculateOffsetTop(field) {   
  99.         return calculateOffset(field, "offsetTop");   
  100.     }   
  101.        
  102.     function calculateOffset(field, attr) {   
  103.         var offset = 0;   
  104.         while(field) {   
  105.             offset += field[attr];   
  106.             field = field.offsetParent;   
  107.         }   
  108.         return offset;   
  109.     }   
  110.        
  111.        
  112.     function populateName(cell) {   
  113.         inputField.value = cell.firstChild.nodeValue;   
  114.         clearNames();   
  115.     }   
  116.        
  117.     function clearNames() {   
  118.         var ind = nameTableBody.childNodes.length;   
  119.         for (var i = ind - 1; i >= 0 ; i--) {   
  120.         nameTableBody.removeChild(nameTableBody.childNodes[i]);   
  121.         }   
  122.         completeDiv.style.border = "none";   
  123.     }   
  124. </script>  
分享到:
评论

相关推荐

    Ajax基础教程(扫描版)

    8.7.7 构建更好的autocomplete 237 8.8 小结 240 附录a 开发跨浏览器javascript 241 a.1 向表中追加行 241 a.2 通过javascript设置元素的样式 242 a.3 设置元素的class属性 243 a.4 创建输入元素 243 a.5 向...

    完全手册:ASP.net Ajax电子教程-part1

    本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...

    完全手册:ASP.net Ajax电子教程-part2

    本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...

    jquery autocomplete实现框输入提示

    &lt;input type="text" id="autocomplete-input"&gt; ``` **2. 初始化 Autocomplete** 接下来,我们需要在 JavaScript 中初始化 Autocomplete 组件,并设置数据源。这里我们假设你有一个返回 JSON 数据的后端 API,...

    完全手册:ASP.net Ajax电子教程

    本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...

    DWR AJAX框架(包含使用教程)

    1. **DWR框架基础** DWR的核心概念是反向Ajax,它创建了一种机制,使得JavaScript可以直接调用服务器端的Java方法,就像它们是本地函数一样。这样,开发者可以轻松地将服务器端的功能暴露给前端,而无需手动处理...

    ajax补全(google suguest)二

    在本教程中,我们将深入探讨如何使用Ajax实现类似于Google Suggest的功能。 Google Suggest是Google搜索中的一项特性,当用户在搜索框输入内容时,它会实时显示可能的搜索建议。这个功能基于Ajax技术,通过向服务器...

    dwr和ajax技术

    3. **JavaScript**:作为Ajax的基础,JavaScript提供了DOM操作、事件处理和异步通信等功能。熟悉JavaScript语法、DOM操作和AJAX API是关键。 4. **JSTL**:JSTL提供了一系列标签,可以简化JSP页面的代码,提高...

    AJAX网站设计实训

    * 教材:苗连强 JSP 程序设计基础教程 * 参考资源:http://www.okajax.com/、http://www.open-open.com/ajax/jQuery.htm、jQueryAPI.chm 等 总结 本课程旨在让学生掌握 Ajax 技术、Jquery 框架、Jquery UI 等知识...

    (asp,jquery) 实现autoComplete功能代码

    本教程将深入讲解如何利用ASP(Active Server Pages)和jQuery库来实现这一功能。 ASP是微软开发的一种服务器端脚本环境,用于创建动态网页应用。jQuery则是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件...

    dwr 基础教程适合初学者阅读 (是一个例子)

    这个基础教程是为初学者设计的,通过实例来讲解DWR的使用。 DWR的核心概念包括以下几个部分: 1. **Reverse Ajax**:DWR实现了Reverse Ajax,即由服务器向客户端推送数据,打破了传统的Web应用中客户端发起请求、...

    ASP.net的Ajax控件代码演示

    除了基础控件,还可以深入学习ASP.NET AJAX的Extender控件,它们提供额外的功能,如ValidatorCallout(弹出验证提示)、Accordion(折叠面板)和AutoComplete(自动完成输入框)等。 六、注意事项 - 虽然Ajax提高了...

    ajax 无刷新分页和自动搜索提示

    ### 一、Ajax基础 Ajax的核心是通过JavaScript创建XMLHttpRequest对象,向服务器发送异步请求,并处理服务器返回的数据。它不依赖页面刷新,而是通过后台获取数据并局部更新DOM(Document Object Model)来实现动态...

    Ajax的dwr总结

    Ajax(Asynchronous JavaScript and XML)技术是DWR实现其功能的基础,通过Ajax,DWR使得前端与后台能够无缝交互,提升用户体验。 1. **DWR的基本概念**: DWR的核心思想是提供一个简单易用的接口,使得JavaScript...

    240多个jQuery UI插件

    - **jQuery Autocomplete by AjaxDaddy**: 基于Ajax实现的自动补全。 - **jQuery Autocomplete Plugin with HTML formatting**: 支持HTML格式化的自动补全插件。 - **jQuery Autocompleter**: 简单易用的自动补全...

    ajax dwr学习笔记和jar文件

    DWR (Direct Web Remoting) 是一个开源的Java库,它允许Web应用程序在客户端JavaScript和服务器端Java之间进行实时通信,无需刷新整个...学习DWR,不仅可以理解Ajax的核心技术,还能为构建现代Web应用打下坚实基础。

Global site tag (gtag.js) - Google Analytics