這篇文章主要介紹如何使用ajax來自動補全表單欄位,對ajax有興趣的朋友可以參考下ajax來自動補全表單欄位範例喔!
腳本一:
<!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> <p id="popups"> </p> </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 tempp = document.createElement("p"); tempp.innerHTML = thisState; tempp.onclick = makeChoice; tempp.className = "suggestions"; document.getElementById("popups").appendChild(tempp); } } 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 thisp = evt.target; } else { var thisp = window.event.srcElement; } document.getElementById("searchField").value = thisp.innerHTML; document.getElementById("popups").innerHTML = ""; }
##分析如下:
1. Please enter your state:
< ;p id="popups">
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
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
當開始在欄位中輸入時,就會執行searchSuggest()事件處理程序中的程式碼。首先獲得
searchField的值,也就是到目前為止已經輸入的資訊。接下來,清空這個欄位的class屬性。
6. if (str != "") {
如果還沒有輸入任何訊息,就不做任何事,所以在這裡進行檢查,確保用戶已經輸入了某個值,
然後再彈出可能值的清單。如果已經輸入了某些訊息,就清空先前的可能值列表。
7. for (var i=0; i
現在,遍歷州名的列表,並且將當前查看的州名儲存在thisState中。
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
我們希望檢查使用者到目前為止輸入的內容是否某個州名的一部分-但是僅僅這樣還不夠,我們
還必須確保輸入的內容位於州名的開頭。畢竟,如果輸入了Kansas,你並不希望下拉框中顯示Arkansas
或Kansas。另外,在進行這項檢查時,也在檢查indexOf()之前確保兩個字串都是小寫的。
如果indexOf()回傳0(也就是說,在thisState的開頭位置處找到了輸入的字串),那麼我們
就知道找到了一個匹配。
9.
var tempp = document.createElement("p"); tempp.innerHTML = thisState; tempp.onclick = makeChoice; tempp.className = "suggestions"; document.getElementById("popups").appendChild(tempp);
因為這個州名是一個可能值,我們希望將它加入要顯示的清單中。實作方法是,建立一個臨時
加到popups p。將每個州名作為單獨的p添加,這樣我們就能夠使用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,我們就知道找到了唯一的匹配,所以可以將這個州名放進字段。如果使用者已
popups中唯一的p填寫輸入字段,從而自動地提供完整的州名,然後清空popups p。
13.
function makeChoice(evt) { if (evt) { var thisp = evt.target; } else { var thisp = window.event.srcElement; } document.getElementById("searchField").value = thisp.innerHTML; document.getElementById("popups").innerHTML = ""; }
輸入州名的另一種方法是,點擊彈出清單中的一個州名。在這種情況下,會呼叫makeChoice()事
件處理程序。首先,我們透過檢查事件的目標,找出使用者點擊了哪個州名,這會提供一個特定的p。
查看這個p的innerHTML會提供州名,我們將這個州名放進輸入欄位。最後,清空可能值的彈出
清單。
相關推薦:
以上是ajax來自動補全表單欄位範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!