简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  ajax来自动补全表单字段示例

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

韦小宝
韦小宝asal
2017-12-31 10:24:531717semak imbas

这篇文章主要介绍了如何使用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:0c6dc11e160d3b678d68754cc175188a
f5f7c67ede4792001fd0fd3abdeb425e0c6dc11e160d3b678d68754cc175188a
113aca4469ca5f73c78ada04f45030cd 94b3e26ee717c64999d7867364b1b4a3
这是我们要注意的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向服务端传递数组参数值实例详解

Atas ialah kandungan terperinci ajax来自动补全表单字段示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用React实现TodoList的详细步骤Artikel seterusnya：JavaScript实现个性导航栏特效

Artikel berkaitan

Lihat lagi