AJAX基础教程－9 AutoComplete

java 代码

package ajax.foundations_of_ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AutoCompleteServlet extends HttpServlet {
    private List names = new ArrayList();

    public void init(ServletConfig config) throws ServletException {
        names.add("Abe");
        names.add("Abel");
        names.add("Abigail");
        names.add("Abner");
        names.add("Abraham");
        names.add("Marcus");
        names.add("Marcy");
        names.add("Marge");
        names.add("Marie");
    }

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        String prefix = request.getParameter("names");
        response.setCharacterEncoding("UTF-8");
        NameService service = NameService.getInstance(names);
        List matching = service.findNames(prefix);
        if (matching.size() > 0) {
            PrintWriter out = response.getWriter();
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            out.println("<response>");
            Iterator iter = matching.iterator();
            while (iter.hasNext()) {
                String name = (String) iter.next();
                out.println("<name>" + name + "</name>");
            }
            out.println("</response>");
            matching = null;
            service = null;
            out.close();
        } else {
            response.setStatus(HttpServletResponse.SC_NO_CONTENT);
        }
    }

}

js 代码

<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;
    //创建xmlHttp对象
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
        }
    }
    //初始化变量
    function initVars() {
        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 = "AutoComplete?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"));
            } 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() {
        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();
    }

    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>

• Auto Complete.rar (2.2 KB)
• 下载次数: 70

分享到：

Hibernate 多对一关联 | AJAX基础教程－8 Tool Tips

• 2007-02-14 09:53
• 浏览 1755
• 评论(0)
• 查看更多

相关推荐

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实现框输入提示

<input type="text" id="autocomplete-input"> ``` **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应用打下坚实基础。