首頁 > web前端 > js教程 > 主體

ajax來自動補全表單欄位範例

韦小宝
發布: 2017-12-31 10:24:53
原創
1718 人瀏覽過

這篇文章主要介紹如何使用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&#39;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">


這是我們要注意的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; ivar thisState = statesArray[i].nodeValue;
現在,遍歷州名的列表,並且將當前查看的州名儲存在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);
登入後複製


因為這個州名是一個可能值,我們希望將它加入要顯示的清單中。實作方法是,建立一個臨時

的p,將它的innerHTML設定為這個州名,加入onclick處理程序和className,然後將整個p追

加到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,我們就知道找到了唯一的匹配,所以可以將這個州名放進字段。如果使用者已

經過輸入了ca,他們就不需要再輸入lifornia,因為我們已經知道他們要輸入哪個州名了。我們使用

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實作圖片預覽與上傳及產生縮圖的方法

jquery和iframe做一個ajax上傳效果實例分享

Ajax向服務端傳遞陣列參數值實例詳解

以上是ajax來自動補全表單欄位範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!