javascript auto complete

woshiliulidiyi

浏览: 103083 次
性别:
来自: 北京

最近访客更多访客>>

prayjourney

wilerlider

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript Ajax Gmail Microsoft HTML

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

分享到：

javascript document 对象属性

2010-10-18 14:38
浏览 774
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论