ajax来自动补全表单字段示例
程序员文章站
2022-06-21 08:47:35
源代码：
脚本一：
auto-f...</div>
<div class="content">
<p>源代码：</p>
<p>脚本一：</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!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></pre>
</div>
<p>脚本二：</p>
<div class="jb51code">
<pre class="brush:css;">
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;
}</pre>
</div>
<p>脚本三：</p>
<p>
</p>
<div class="jb51code">
<pre class="brush:js;">
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 = "";
}</pre>
</div>
<p>分析如下：</p>
<p>1. please enter your state:<br><br>
<input type="text"id="searchfield" autocomplete="off"><br><br>
<div id="popups"> </div><br>
这是我们要注意的html代码。其中的特殊之处是autocomplete属性（这个属性是非标准兼容的）。<br>
它告诉浏览器不要在这个字段上执行任何自动补全，因为我们将用脚本处理自动补全。与xmlhttp-<br>
request一样，尽管autocomplete不是任何w3c建议的一部分，但是它得到了很好的跨浏览器支持。<br>
2. document.getelementbyid("searchfield").onkeyup = searchsuggest;<br>
为了捕捉和处理每次击键，需要一个事件处理程序，这是在initall()中设置的。<br>
3. xhr.onreadystatechange =setstatesarray;<br>
xhr.open("get", "us-states.xml",true);<br>
xhr.send(null);</p>
<p>4.</p>
<div class="jb51code">
<pre class="brush:js;">
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;
}
}</pre>
</div>
<p>我们在这里读取文件，查看每个item节点，寻找其中的label节点，并且存储label的firstchild<br>
（州名本身）。每个州名存储在statesarray数组中的一个元素中。<br>
5. var str = document.getelementbyid("searchfield").value;<br>
document.getelementbyid("searchfield").classname = "";<br>
当开始在字段中进行输入时，就会执行searchsuggest()事件处理程序中的代码。首先获得<br>
searchfield的值，也就是到目前为止已经输入的信息。接下来，清空这个字段的class属性。</p>
<p>6. if (str != "") {<br>
document.getelementbyid("popups").innerhtml = "";<br>
如果还没有输入任何信息，就不做任何事，所以在这里进行检查，确保用户已经输入了某个值，<br>
然后再弹出可能值的列表。如果已经输入了某些信息，就清空以前的可能值列表。<br>
7. for (var i=0; i<statesarray.length; i++) {<br>
var thisstate = statesarray[i].nodevalue;<br>
现在，遍历州名的列表，并且将当前查看的州名存储在thisstate中。<br>
8. if (thisstate.tolowercase().indexof(str.tolowercase())== 0) {<br>
我们希望检查用户到目前为止输入的内容是否某个州名的一部分——但是仅仅这样还不够，我们<br>
还必须确保输入的内容位于州名的开头。毕竟，如果输入了kansas，你并不希望下拉框中显示arkansas<br>
或kansas。另外，在进行这项检查时，还在检查indexof()之前确保两个字符串都是小写的。<br>
如果indexof()返回0（也就是说，在thisstate的开头位置处找到了输入的字符串），那么我们<br>
就知道找到了一个匹配。<br>
9.</p>
<div class="jb51code">
<pre class="brush:js;">
var tempdiv = document.createelement("div");
tempdiv.innerhtml = thisstate;
tempdiv.onclick = makechoice;
tempdiv.classname = "suggestions";
document.getelementbyid("popups").appendchild(tempdiv);</pre>
</div>
<p>因为这个州名是一个可能值，我们希望将它添加到要显示的列表中。实现方法是，创建一个临时<br>
的div，将它的innerhtml设置为这个州名，添加onclick处理程序和classname，然后将整个div追<br>
加到popups div中。将每个州名作为单独的div添加，这样我们就能够使用javascript和css操作每<br>
个州名。<br>
10. var foundct = document.getelementbyid("popups").childnodes.length;<br>
当遍历完所有州名之后，我们要建立弹出窗口——但是我们得到了多少个州名呢？这里就计算这<br>
个值：foundct。<br>
11. if (foundct == 0) {<br>
document.getelementbyid("searchfield").classname = "error";<br>
}<br>
如果foundct是0，就说明用户输入了错误的内容。我们将classname设置为error，从而让用户<br>
知道输入错了，这一设置会使输入字段显示浅黄色背景（这由脚本13-17中的css样式规则控制）。<br>
12. </p>
<div class="jb51code">
<pre class="brush:js;">
if (foundct == 1) {
document.getelementbyid("searchfield").value = document.getelementbyid
➝("popups").firstchild.innerhtml;
document.getelementbyid("popups").innerhtml = "";
}</pre>
</div>
<p>如果foundct是1，我们就知道找到了唯一的匹配，所以可以将这个州名放进字段。如果用户已<br>
经输入了ca，他们就不需要再输入lifornia，因为我们已经知道了他们要输入哪个州名。我们使用<br>
popups中唯一的div填写输入字段，从而自动地提供完整的州名，然后清空popups div。<br>
13.</p>
<div class="jb51code">
<pre class="brush:js;">
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 = "";
}</pre>
</div>
<p>输入州名的另一种方法是，单击弹出列表中的一个州名。在这种情况下，会调用makechoice()事<br>
件处理程序。首先，我们通过检查事件的目标，查明用户单击了哪个州名，这会提供一个特定的div。<br>
查看这个div的innerhtml会提供州名，我们将这个州名放进输入字段。最后，清空可能值的弹出<br>
列表。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1475165.html">
JQuery AJAX参数详解补充附示例 </a>
</p>
<p>
下一篇： <a href="/article/1475167.html">
Unity实现新手引导镂空效果 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2128264.html" target="_blank" title="ajax来自动补全表单字段示例">
<h2>
ajax来自动补全表单字段示例 </h2>
</a>
</li>
<li>
<a href="/article/2128255.html" target="_blank" title="Ajax中通过JS代码自动获取表单元素值的示例代码">
<h2>
Ajax中通过JS代码自动获取表单元素值的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1475166.html" target="_blank" title="ajax来自动补全表单字段示例">
<h2>
ajax来自动补全表单字段示例 </h2>
</a>
</li>
<li>
<a href="/article/1475065.html" target="_blank" title="Ajax中通过JS代码自动获取表单元素值的示例代码">
<h2>
Ajax中通过JS代码自动获取表单元素值的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/654430.html" target="_blank" title="Ajax中通过JS代码自动获取表单元素值的示例代码">
<h2>
Ajax中通过JS代码自动获取表单元素值的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/651879.html" target="_blank" title="ajax来自动补全表单字段示例">
<h2>
ajax来自动补全表单字段示例 </h2>
</a>
</li>
<li>
<a href="/article/640638.html" target="_blank" title="Ajax中通过JS代码自动获取表单元素值的示例代码">
<h2>
Ajax中通过JS代码自动获取表单元素值的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/371401.html" target="_blank" title="ajax来自动补全表单字段示例">
<h2>
ajax来自动补全表单字段示例 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>