主頁 > 知識庫 > ajax來自動補(bǔ)全表單字段示例

ajax來自動補(bǔ)全表單字段示例

熱門標(biāo)簽:上海浦東百度地圖標(biāo)注中心注冊 徐州電銷卡外呼系統(tǒng)供應(yīng)商 外呼系統(tǒng)獲取客戶手機(jī)號 百靈鳥 老虎郵局地圖標(biāo)注點(diǎn) 目標(biāo)三維地圖標(biāo)注 襄陽外呼系統(tǒng)接口 科智聯(lián)智能電銷機(jī)器人 青海醫(yī)療智能外呼系統(tǒng)怎么樣

源代碼:

腳本一:

!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; iallStates.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; istatesArray.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í)行任何自動補(bǔ)全,因?yàn)槲覀儗⒂媚_本處理自動補(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; iallStates.length; i++) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}

我們在這里讀取文件,查看每個(gè)item節(jié)點(diǎn),尋找其中的label節(jié)點(diǎn),并且存儲label的firstChild
(州名本身)。每個(gè)州名存儲在statesArray數(shù)組中的一個(gè)元素中。
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
當(dāng)開始在字段中進(jìn)行輸入時(shí),就會執(zhí)行searchSuggest()事件處理程序中的代碼。首先獲得
searchField的值,也就是到目前為止已經(jīng)輸入的信息。接下來,清空這個(gè)字段的class屬性。

6. if (str != "") {
document.getElementById("popups").innerHTML = "";
如果還沒有輸入任何信息,就不做任何事,所以在這里進(jìn)行檢查,確保用戶已經(jīng)輸入了某個(gè)值,
然后再彈出可能值的列表。如果已經(jīng)輸入了某些信息,就清空以前的可能值列表。
7. for (var i=0; istatesArray.length; i++) {
var thisState = statesArray[i].nodeValue;
現(xiàn)在,遍歷州名的列表,并且將當(dāng)前查看的州名存儲在thisState中。
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
我們希望檢查用戶到目前為止輸入的內(nèi)容是否某個(gè)州名的一部分——但是僅僅這樣還不夠,我們
還必須確保輸入的內(nèi)容位于州名的開頭。畢竟,如果輸入了Kansas,你并不希望下拉框中顯示Arkansas
或Kansas。另外,在進(jìn)行這項(xiàng)檢查時(shí),還在檢查indexOf()之前確保兩個(gè)字符串都是小寫的。
如果indexOf()返回0(也就是說,在thisState的開頭位置處找到了輸入的字符串),那么我們
就知道找到了一個(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,就說明用戶輸入了錯(cuò)誤的內(nèi)容。我們將className設(shè)置為error,從而讓用戶
知道輸入錯(cuò)了,這一設(shè)置會使輸入字段顯示淺黃色背景(這由腳本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)字段。如果用戶已
經(jīng)輸入了ca,他們就不需要再輸入lifornia,因?yàn)槲覀円呀?jīng)知道了他們要輸入哪個(gè)州名。我們使用
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 = "";
}

輸入州名的另一種方法是,單擊彈出列表中的一個(gè)州名。在這種情況下,會調(diào)用makeChoice()事
件處理程序。首先,我們通過檢查事件的目標(biāo),查明用戶單擊了哪個(gè)州名,這會提供一個(gè)特定的div。
查看這個(gè)div的innerHTML會提供州名,我們將這個(gè)州名放進(jìn)輸入字段。最后,清空可能值的彈出
列表。

您可能感興趣的文章:
  • asp.net+ajax+sqlserver自動補(bǔ)全功能實(shí)現(xiàn)解析
  • JSP + ajax實(shí)現(xiàn)輸入框自動補(bǔ)全功能 實(shí)例代碼
  • Ajax實(shí)現(xiàn)搜索引擎自動補(bǔ)全功能

標(biāo)簽:佛山 辛集 荊州 咸寧 商洛 紅河 揭陽 股票

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ajax來自動補(bǔ)全表單字段示例》,本文關(guān)鍵詞  ajax,來,自動,補(bǔ)全,表單,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ajax來自動補(bǔ)全表單字段示例》相關(guān)的同類信息!
  • 本頁收集關(guān)于ajax來自動補(bǔ)全表單字段示例的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章