ajax实现自动补全

最新推荐文章于 2023-07-20 17:22:21 发布

wenzhihui_2010

最新推荐文章于 2023-07-20 17:22:21 发布

阅读量2.5k

点赞数

分类专栏： jquery javascript ajax--json

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/wenzhihui_2010/article/details/9187203

版权

javascript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

8 篇文章 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";

        }

        function clearDiv(){
            completeDiv.style.display="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>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax实现自动补全

http://www.w3.org/TR/html4/loose.dtd">Ajax Auto Complete.mouseOut
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。