这篇文章主要介绍了如何使用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="//m.sbmmt.com/m/faq/#"> 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:<br>
<input type="text"id="searchField" autocomplete="off"><br>
<p id="popups"> </p>
这是我们要注意的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 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来自动补全表单字段示例的详细内容,更多请关注php中文网其它相关文章!
已抢66549个
抢已抢37560个
抢已抢20818个
抢已抢2571个
抢已抢19134个
抢