溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用ajax怎么自動(dòng)補(bǔ)全表單字段，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
源代碼：
腳本一：
<!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屬性（這個(gè)屬性是非標(biāo)準(zhǔn)兼容的）。
它告訴瀏覽器不要在這個(gè)字段上執(zhí)行任何自動(dòng)補(bǔ)全，因?yàn)槲覀儗⒂媚_本處理自動(dòng)補(bǔ)全。與XMLHttp-
Request一樣，盡管autocomplete不是任何W3C建議的一部分，但是它得到了很好的跨瀏覽器支持。
2. document.getElementById("searchField").onkeyup = searchSuggest;
為了捕捉和處理每次擊鍵，需要一個(gè)事件處理程序，這是在initAll()中設(shè)置的。
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;
}
}我們?cè)谶@里讀取文件，查看每個(gè)item節(jié)點(diǎn)，尋找其中的label節(jié)點(diǎn)，并且存儲(chǔ)label的firstChild
（州名本身）。每個(gè)州名存儲(chǔ)在statesArray數(shù)組中的一個(gè)元素中。
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
當(dāng)開(kāi)始在字段中進(jìn)行輸入時(shí)，就會(huì)執(zhí)行searchSuggest()事件處理程序中的代碼。首先獲得
searchField的值，也就是到目前為止已經(jīng)輸入的信息。接下來(lái)，清空這個(gè)字段的class屬性。
6. if (str != "") {
document.getElementById("popups").innerHTML = "";
如果還沒(méi)有輸入任何信息，就不做任何事，所以在這里進(jìn)行檢查，確保用戶(hù)已經(jīng)輸入了某個(gè)值，
然后再?gòu)棾隹赡苤档牧斜?。如果已?jīng)輸入了某些信息，就清空以前的可能值列表。
7. for (var i=0; i<statesArray.length; i++) {
var thisState = statesArray[i].nodeValue;
現(xiàn)在，遍歷州名的列表，并且將當(dāng)前查看的州名存儲(chǔ)在thisState中。
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
我們希望檢查用戶(hù)到目前為止輸入的內(nèi)容是否某個(gè)州名的一部分——但是僅僅這樣還不夠，我們
還必須確保輸入的內(nèi)容位于州名的開(kāi)頭。畢竟，如果輸入了Kansas，你并不希望下拉框中顯示Arkansas
或Kansas。另外，在進(jìn)行這項(xiàng)檢查時(shí)，還在檢查indexOf()之前確保兩個(gè)字符串都是小寫(xiě)的。
如果indexOf()返回0（也就是說(shuō)，在thisState的開(kāi)頭位置處找到了輸入的字符串），那么我們
就知道找到了一個(gè)匹配。
9.
var tempDiv = document.createElement("div");
tempDiv.innerHTML = thisState;
tempDiv.onclick = makeChoice;
tempDiv.className = "suggestions";
document.getElementById("popups").appendChild(tempDiv);因?yàn)檫@個(gè)州名是一個(gè)可能值，我們希望將它添加到要顯示的列表中。實(shí)現(xiàn)方法是，創(chuàng)建一個(gè)臨時(shí)
的div，將它的innerHTML設(shè)置為這個(gè)州名，添加onclick處理程序和className，然后將整個(gè)div追
加到popups div中。將每個(gè)州名作為單獨(dú)的div添加，這樣我們就能夠使用JavaScript和CSS操作每
個(gè)州名。
10. var foundCt = document.getElementById("popups").childNodes.length;
當(dāng)遍歷完所有州名之后，我們要建立彈出窗口——但是我們得到了多少個(gè)州名呢？這里就計(jì)算這
個(gè)值：foundCt。
11. if (foundCt == 0) {
document.getElementById("searchField").className = "error";
}
如果foundCt是0，就說(shuō)明用戶(hù)輸入了錯(cuò)誤的內(nèi)容。我們將className設(shè)置為error，從而讓用戶(hù)
知道輸入錯(cuò)了，這一設(shè)置會(huì)使輸入字段顯示淺黃色背景（這由腳本13-17中的CSS樣式規(guī)則控制）。
12.
if (foundCt == 1) {
document.getElementById("searchField").value = document.getElementById
?("popups").firstChild.innerHTML;
document.getElementById("popups").innerHTML = "";
}如果foundCt是1，我們就知道找到了唯一的匹配，所以可以將這個(gè)州名放進(jìn)字段。如果用戶(hù)已
經(jīng)輸入了ca，他們就不需要再輸入lifornia，因?yàn)槲覀円呀?jīng)知道了他們要輸入哪個(gè)州名。我們使用
popups中唯一的div填寫(xiě)輸入字段，從而自動(dòng)地提供完整的州名，然后清空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 = "";
}上述就是小編為大家分享的使用ajax怎么自動(dòng)補(bǔ)全表單字段了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼