欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自动补全JS、AJAX功能

程序员文章站 2022-03-01 17:57:51
...

直接上代码了:

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

 

 

效果图:


自动补全JS、AJAX功能
            
    
    博客分类: WEB AjaxGmailJavaScriptCSSHTML
 

  • 自动补全JS、AJAX功能
            
    
    博客分类: WEB AjaxGmailJavaScriptCSSHTML
  • 大小: 24.1 KB