ajax来自动补全表单字段示例 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

    这篇文章主要介绍了如何使用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><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:

   

   

    这是我们要注意的HTML代码,

ajax来自动补全表单字段示例

。其中的特殊之处是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

    (州名本身),

电脑资料

ajax来自动补全表单字段示例》(https://www.unjs.com)。每个州名存储在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

    var thisState = statesArray[i].nodeValue;

    现在,遍历州名的列表,并且将当前查看的州名存储在thisState中。

    8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {

    我们希望检查用户到目前为止输入的内容是否某个州名的一部分——但是仅仅这样还不够,我们

    还必须确保输入的内容位于州名的开头。毕竟,如果输入了Kansas,你并不希望下拉框中显示Arkansas

    或Kansas。另外,在进行这项检查时,还在检查indexOf()之前确保两个字符串都是小写的。

    如果indexOf()返回0(也就是说,在thisState的开头位置处找到了输入的字符串),那么我们

    就知道找到了一个匹配。

    9.

   

var tempDiv = document.createElement("div");tempDiv.innerHTML = thisState;tempDiv.onclick = makeChoice;tempDiv.className = "suggestions";document.getElementById("popups").appendChild(tempDiv);

    因为这个州名是一个可能值,我们希望将它添加到要显示的列表中。实现方法是,创建一个临时

    的div,将它的innerHTML设置为这个州名,添加onclick处理程序和className,然后将整个div追

    加到popups div中。将每个州名作为单独的div添加,这样我们就能够使用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中唯一的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 = "";}

    输入州名的另一种方法是,单击弹出列表中的一个州名。在这种情况下,会调用makeChoice()事

    件处理程序。首先,我们通过检查事件的目标,查明用户单击了哪个州名,这会提供一个特定的div。

    查看这个div的innerHTML会提供州名,我们将这个州名放进输入字段。最后,清空可能值的弹出

    列表。

最新文章