原始碼：
指令碼一：
<!DOCTYPE html><html><head><title>Auto-fill Form Fields</title><link rel="stylesheet"href="script06.css" rel="external nofollow" ><script src="script06.js"></script></head><body><form action="#">Please enter your state:<br><input type="text" id="searchField" autocomplete="off"><br><div id="popups"> </div></form></body></html>
指令碼二：
body, #searchfield {font: 1.2em arial, helvetica,sans-serif;}.suggestions {background-color: #FFF;padding: 2px 6px;border: 1px solid #000;}.suggestions:hover {background-color: #69F;}#popups {position: absolute;}#searchField.error {background-color: #FFC;}
指令碼三：
window.onload = initAll;var xhr = false;var statesArray = new Array();function initAll() {document.getElementById("searchField").onkeyup = searchSuggest;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}else {if (window.ActiveXObject) {try {xhr = new ActiveXObject("Microsoft.XMLHTTP");}catch (e) { }}}if (xhr) {xhr.onreadystatechange = setStatesArray;xhr.open("GET", "us-states.xml",true);xhr.send(null);}else {alert("Sorry, but I couldn't create an XMLHttpRequest");}}function setStatesArray() {if (xhr.readyState == 4) {if (xhr.status == 200) {if (xhr.responseXML) {var allStates = xhr.responseXML.getElementsByTagName("item");for (var i=0; i<allStates.length; i++) {statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;}}}else {alert("There was a problem with the request " + xhr.status);}}}function searchSuggest() {var str = document.getElementById("searchField").value;document.getElementById("searchField").className = "";if (str != "") {document.getElementById("popups").innerHTML = "";for (var i=0; i<statesArray.length;i++) {var thisState = statesArray[i].nodeValue;if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {var tempDiv = document.createElement("div");tempDiv.innerHTML = thisState;tempDiv.onclick = makeChoice;tempDiv.className = "suggestions";document.getElementById("popups").appendChild(tempDiv);}}var foundCt = document.getElementById("popups").childNodes.length;if (foundCt == 0) {document.getElementById("searchField").className ="error";}if (foundCt == 1) {document.getElementById("searchField").value = document.getElementById("popups").firstChild.innerHTML;document.getElementById("popups").innerHTML = "";}}}function makeChoice(evt) {if (evt) {var thisDiv = evt.target;}else {var thisDiv = window.event.srcElement;}document.getElementById("searchField").value = thisDiv.innerHTML;document.getElementById("popups").innerHTML = "";}
分析如下：
1. Please enter your state:<br>
<input type="text"id="searchField" autocomplete="off"><br>
<div id="popups"> </div>
這是我們要注意的HTML代碼。其中的特殊之處是autocomplete屬性（這個屬性是非標準相容的）。
它告訴瀏覽器不要在這個欄位上執行任何自動補全，因為我們將用指令碼處理自動補全。與XMLHttp-
Request一樣，儘管autocomplete不是任何W3C建議的一部分，但是它得到了很好的跨瀏覽器支援。
2. document.getElementById("searchField").onkeyup = searchSuggest;
為了捕捉和處理每次擊鍵，需要一個事件處理常式，這是在initAll()中設定的。
3. xhr.onreadystatechange =setStatesArray;
xhr.open("GET", "us-states.xml",true);
xhr.send(null);
4.
if (xhr.responseXML) {var allStates = xhr.responseXML.getElementsByTagName("item");for (var i=0; i<allStates.length; i++) {statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;}}
我們在這裡讀取檔案，查看每個item節點，尋找其中的label節點，並且儲存label的firstChild
（州名本身）。每個州名儲存在statesArray數組中的一個元素中。
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
當開始在欄位中進行輸入時，就會執行searchSuggest()事件處理常式中的代碼。首先獲得
searchField的值，也就是到目前為止已經輸入的資訊。接下來，清空這個欄位的class屬性。
6. if (str != "") {
document.getElementById("popups").innerHTML = "";
如果還沒有輸入任何資訊，就不做任何事，所以在這裡進行檢查，確保使用者已經輸入了某個值，
然後再彈出可能值的列表。如果已經輸入了某些資訊，就清空以前的可能值列表。
7. for (var i=0; i<statesArray.length; i++) {
var thisState = statesArray[i].nodeValue;
現在，遍曆州名的列表，並且將當前查看的州名儲存在thisState中。
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
我們希望檢查使用者到目前為止輸入的內容是否某個州名的一部分——但是僅僅這樣還不夠，我們
還必須確保輸入的內容位於州名的開頭。畢竟，如果輸入了Kansas，你並不希望下拉框中顯示Arkansas
或Kansas。另外，在進行這項檢查時，還在檢查indexOf()之前確保兩個字串都是小寫。
如果indexOf()返回0（也就是說，在thisState的開頭位置處找到了輸入的字串），那麼我們
就知道找到了一個匹配。
9.
var tempDiv = document.createElement("div");tempDiv.innerHTML = thisState;tempDiv.onclick = makeChoice;tempDiv.className = "suggestions";document.getElementById("popups").appendChild(tempDiv);
因為這個州名是一個可能值，我們希望將它添加到要顯示的列表中。實現方法是，建立一個臨時
的div，將它的innerHTML設定為這個州名，添加onclick處理常式和className，然後將整個div追
加到popups div中。將每個州名作為單獨的div添加，這樣我們就能夠使用JavaScript和CSS操作每
個州名。
10. var foundCt = document.getElementById("popups").childNodes.length;
當遍曆完所有州名之後，我們要建立快顯視窗——但是我們得到了多少個州名呢？這裡就計算這
個值：foundCt。
11. if (foundCt == 0) {
document.getElementById("searchField").className = "error";
}
如果foundCt是0，就說明使用者輸入了錯誤的內容。我們將className設定為error，從而讓使用者
知道輸入錯了，這一設定會使輸入欄位顯示淺黃色背景（這由指令碼13-17中的CSS樣式規則控制）。
12.
if (foundCt == 1) {document.getElementById("searchField").value = document.getElementById➝("popups").firstChild.innerHTML;document.getElementById("popups").innerHTML = "";}
如果foundCt是1，我們就知道找到了唯一的匹配，所以可以將這個州名放進欄位。如果使用者已
經輸入了ca，他們就不需要再輸入lifornia，因為我們已經知道了他們要輸入哪個州名。我們使用
popups中唯一的div填寫輸入欄位，從而自動地提供完整的州名，然後清空popups div。
13.
function makeChoice(evt) {if (evt) {var thisDiv = evt.target;}else {var thisDiv = window.event.srcElement;}document.getElementById("searchField").value = thisDiv.innerHTML;document.getElementById("popups").innerHTML = "";}
輸入州名的另一種方法是，單擊彈出列表中的一個州名。在這種情況下，會調用makeChoice()事
件處理常式。首先，我們通過檢查事件的目標，查明使用者單擊了哪個州名，這會提供一個特定的div。
查看這個div的innerHTML會提供州名，我們將這個州名放進輸入欄位。最後，清空可能值的彈出
列表。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
