`
andy54321
  • 浏览: 442446 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

自动补全JS、AJAX功能

    博客分类：
  • WEB
AjaxGmailJavaScriptCSSHTML 
阅读更多

直接上代码了：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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() {

            inputField = document.getElementById("names");

            nameTable = document.getElementById("name_table");

            completeDiv = document.getElementById("popup");

            nameTableBody = document.getElementById("name_table_body");

        }

 

        function findNames() {
            initVars();

            var mails = ["@163.com","@sina.com","@gmail.com"];
            if (inputField.value.length > 0) {
                clearNames();

                var size = mails.length;

                setOffsets();
            	var row, cell, txtNode;
            	var dizhi = inputField.value;

                for (var i = 0; i < size; i++) {
                    var nextNode = dizhi + mails[i];

                    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);

                }
				return;
            }



            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"));

                } 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>

</head>

<body>

<h1>showAllEmailFixes.html</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>

 

 

效果图：



 

  • 大小: 24.1 KB
分享到：
| 五月份三网真的合一了，哪些工作岗位会火起 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax文本框自动补全功能

    总的来说，"ajax文本框自动补全功能"涉及前端的JavaScript、Ajax交互以及后端的数据库查询等技术。通过合理的设计和实现，可以极大地提高用户在搜索和输入过程中的效率和满意度。在实际项目中，还需要考虑性能优化、...

    Ajax实现自动补全和搜索功能(jsp)

    在本项目中，Ajax被用来实现自动补全和搜索功能，提升用户输入体验，减少不必要的页面跳转，提高网页响应速度。 首先，自动补全功能是基于用户输入的字符，在后台数据库或数据源中实时查找匹配项，并在用户输入过程...

    Java - Ajax自动补全

    在这个项目中，我们将聚焦于如何利用Direct Web Remoting (DWR) 框架来实现Ajax的自动补全功能。 DWR是一种轻量级的Java库，它允许JavaScript和Java之间进行安全的、动态的远程方法调用(RMI)。DWR简化了Ajax应用的...

    Ajax自动补全功能

    ### Ajax自动补全功能 #### 一、简介 在现代Web开发中，为了提升用户体验，很多网站都会使用Ajax技术来实现实时性更强的功能，比如搜索框中的自动补全功能。通过Ajax技术，用户在输入搜索关键词的过程中，系统就...

    Ajax实现自动补全

    Ajax实现的自动补全功能提高了用户的交互体验，它利用了JavaScript和Java的结合，实现实时的数据交换。在这个例子中，用户在`word.jsp`页面输入时，Java后端根据输入提供匹配的词汇，然后通过Ajax技术将这些词汇动态...

    Ajax实现自动补全和搜索功能

    在提供的压缩包中，"Ajax实现自动补全和搜索功能步骤.doc"很可能是一个详细的步骤文档，它会涵盖上述各个步骤的实现细节，包括如何编写JavaScript代码、如何配置后端接口以及如何处理用户交互。而"自动补全.rar"可能...

    java实现自动补全功能

    在Java开发中，实现自动补全功能是一种常见的需求，特别是在Web应用中，它可以极大地提高用户输入的效率和体验。这个项目使用了Java后端技术和AJAX前端技术来完成这一功能。接下来，我们将深入探讨如何利用Java和...

    ajax代码实现自动补全功能

    **Ajax技术实现自动补全功能** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在Web开发中，它极大地提升了用户体验，尤其是在实现搜索框的自动补全功能...

    改进版 jquery 仿百度谷歌自动补全输入（支持中文）

    它可能是一个示例文件名，也可能代表一系列相关的文件或目录，用于存储自动补全功能的相关资源，比如样式表（CSS）、JavaScript文件、配置文件或者数据文件。 总的来说，这个项目结合了jQuery、JavaScript和可能的...

    ajax实现自动补全

    在IT领域，特别是Web开发中，使用Ajax（Asynchronous JavaScript and XML）实现自动补全功能是一种常见的技术。本文将深入探讨如何通过Ajax结合JavaScript和Java来实现这一功能，包括前端的事件监听、数据请求与处理...

    ASP.NET AJAX 文本框内容自动补全JS代码

    ASP.NET AJAX 文本框内容自动补全JS代码 自动补全 自动提示 根据关键词自动下拉菜单

    邮箱自动补全demo

    邮箱自动补全通常基于JavaScript实现，利用AJAX异步请求获取匹配的邮箱域名列表。当用户在输入框中输入字符时，通过监听键盘事件触发请求，服务器返回与输入匹配的邮箱后缀，然后在前端动态展示出来。 2. **关键...

    jQuery ajax搜索框自动补全代码

    首先，jQuery的ajax功能是实现异步数据通信的关键。Ajax（Asynchronous JavaScript and XML）允许我们在不刷新整个页面的情况下，与服务器交换数据并更新部分网页内容。在搜索框自动补全的场景下，用户输入关键词时...

    JS自动补全下拉框代码

    JavaScript自动补全功能，也称为智能提示或自动完成，是一种常见的前端交互设计，常用于搜索引擎、表单输入等场景，以提升用户体验。本代码示例实现了基础的自动补全功能，但AJAX部分需要开发者自行添加。以下是关于...

    ajax(DWR框架)实现简单的内容自动补全

    在IT领域，特别是Web开发中，Ajax（Asynchronous JavaScript and XML）技术和DWR（Direct Web Remoting）框架的结合被广泛应用于实现动态网页效果，尤其是内容自动补全功能，这在用户界面交互设计中极为常见。...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中，我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见，它能够提高用户输入的效率和用户体验。 首先，让...

    jquery自动补全示例。包括后台，中文乱码解决JS

    本示例将涵盖如何使用jQuery实现自动补全功能，包括解决中文乱码问题以及常用属性配置。 ### 1. jQuery自动补全基本原理 jQuery 自动补全基于jQuery库，通过监听用户在输入框中的输入事件，实时查询预定义的数据集...

    jQuery实现自动补全功能

    总的来说，jQuery实现自动补全功能是一个实用且常见的话题，它涉及到DOM操作、事件监听、Ajax请求以及数据处理等多个JavaScript和jQuery的核心概念。通过学习和实践，开发者能够提升用户界面的交互性和可用性，增强...

    邮箱自动补全

    7. **样式定制**：考虑到描述中提到的自定义样式功能，`autoMail.1.0.min.js`可能提供了接口，允许开发者通过CSS来改变自动补全列表的外观。 `index.html`文件是项目的主页面，它包含了HTML结构，引入了jQuery库和`...

    ajax自动补全模糊查询

    **Ajax自动补全模糊查询**是一种常见的前端交互技术，它基于JavaScript的Ajax（异步JavaScript和XML）技术，实现用户在输入框中输入文本时，系统实时从服务器端获取匹配数据并显示为下拉提示，极大地提升了用户体验...

Magicbox
Global site tag (gtag.js) - Google Analytics