自动补全JS、AJAX功能

最新推荐文章于 2022-03-06 01:05:59 发布
myicer
最新推荐文章于 2022-03-06 01:05:59 发布
阅读量186
点赞数
分类专栏： WEB 文章标签： Ajax Gmail JavaScript CSS HTML ViewUI
WEB 专栏收录该内容
23 篇文章 0 订阅
订阅专栏
直接上代码了：
<!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" οnkeyup="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>
效果图：