无为清净楼资源网

ajax来自动补全表单字段示例
网络编程 2024/11/15 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

源代码：

脚本一：

<!DOCTYPE html>
<html>
<head>
<title>Auto-fill Form Fields</title>
<link rel="stylesheet"href="script06.css" rel="external nofollow" >
<script src="/UploadFiles/2021-04-02/script06.js">


脚本二：





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:<br>

<input type="text"id="searchField" autocomplete="off"><br>

<div id="popups"> </div>

这是我们要注意的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 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会提供州名，我们将这个州名放进输入字段。最后，清空可能值的弹出

列表。
标签：
ajax,自动补全
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接