首頁 > 開發者 > Ajax

Ajax基礎學習_4.9 提供自動完成

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<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.getElementByIdx_x("names");           
        nameTable = document.getElementByIdx_x("name_table");           
        completeDiv = document.getElementByIdx_x("popup");           
        nameTableBody = document.getElementByIdx_x("name_table_body");       
     }       
     function findNames() {           
         initVars();           
         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_r("name")[0].firstChild.data;                   
        setNames(xmlHttp.responseXML.getElementsByTagName_r("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_x("tr");               
            cell = document.createElement_x("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_xss(txtNode);               
            row.appendChild_xss(cell);               
            nameTableBody.appendChild_xss(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>Ajax Auto Complete Example</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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More