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:<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实现搜索引擎自动补全功能
每当我们遇到一些问题时候,我们会百度一下,你是有过我们的问题还没打完就已经出现的经历? 如下图: 天猫: 京东: 这时候的你是否想到如何实现这个功能? 我们的网页明明没有刷新,可是却出现了数据的交互,也就是Ajax的强大之处. 下面以一个例子来实现. 搜索框和搜索按钮,我们希望在搜索框输入部分书名时,能够实现书名的自动补全功能.每当点击了相应的书名,就把内容输入到搜索框. 对应的代码 Search <input type="text" name="name"
-
asp.net+ajax+sqlserver自动补全功能实现解析
代码下载 说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库. 参考(向其作者致敬): ² http://www.loveweb8.com/plus/demo.php?aid=57这个例子是html源码.利用jquery.autocomplete插件利用js实现了自动补全功能.由于我的需要是结合sqlserver数据库表实现自动补全功能.就下来就是将数据库表转为js数组,自然而然就想到了ajax. ² Asp.NetAjax的两种基本开发模式这篇
-
JSP + ajax实现输入框自动补全功能 实例代码
下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果: index.jsp(包含主要的js代码) 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();
-
ajax来自动补全表单字段示例
源代码: 脚本一: <!DOCTYPE html> <html> <head> <title>Auto-fill Form Fields</title> <link rel="stylesheet"href="script06.css" rel="external nofollow" > <script src="script06.js">&l
-
PHP自动补全表单的两种方法
效果图: 第一种:从数据库中检索之后补全 第二种:邮箱等纯前端的补全 先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/fengyuanchen/completer 做法特别容易,github上面有详细的文档. 一开始尝试用这个来配上自己的后台代码,做成第一种的自动补全,搞了半天失败了.可能本人js太差,改动太多的话,代码很复杂,除非认真研究上面这个开源项目. 主要失败在我在后台数据库找出来的完整的模糊查询得到的数据,
-
PyQt5 文本输入框自动补全QLineEdit的实现示例
一.QCompleter类 自动补全会用到的一个类 主要代码 def init_lineedit(self): # 增加自动补全 self.completer = QCompleter(items_list) # 设置匹配模式 有三种: Qt.MatchStartsWith 开头匹配(默认) Qt.MatchContains 内容匹配 Qt.MatchEndsWith 结尾匹配 self.completer.setFilterMode(Qt.MatchContains) # 设置补全模式 有三种
-
vue 简单自动补全的输入框的示例
实现一个输入框,输入信息后显示由后台返回的数据,供用户选择,之前用的elm的组件,不过那个有点大...简单的情况下自己实现一个也能满足要求...应该吧... 主题包括一个input用于输入,一个div用于展示数据,div里面是数据项item 当在input中按下回车时,会根据信息去后台获取数据,如果用户点击了别的地方,input失去焦点,则提示的div也应该收起来 bug: 在blur事件中,如果直接将isShow设置为false会出问题,先失去焦点,显示面板消失,所以你的点击不会被监听到...
-
Ajax实现关键字联想和自动补全功能及遇到坑
目录 遇到的小坑 代码实现 前端代码 后端代码 用到的实体类 自己封装的jdbc工具类 数据库表: 效果展示: 遇到的小坑 回调函数相对window.onload的摆放位置 给回调函数addData传数据时,如何操作才能将数据传进去 代码实现 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax实现关键
-
使用Bootstrap typeahead插件实现搜索框自动补全的方法
这就是贴代码的坏处之一:搜索框快被网友玩儿坏了!!!有故意输入空格的,有输入or 1=1的,有alert的,有html乱入的.......而且好像还在玩儿,随他们去吧,只要开心就好. 在项目中,经常会用到输入框的自动补全功能,就像百度.淘宝等搜索框一样:当用户输入首字母.关键词时,后台会迅速将与此相关的条目返回并显示到前台,以便用户选择,提升用户体验.当然本项目的补全功能和这些大厂的技术是没有可比性的,但用于站内搜索也是绰绰有余了. 接触到的自动补全插件主要有两个:autocomplete和ty
-
PHP+jQuery实现自动补全功能源码
前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择.由于项目很多地方要用到这个功能,所以需要用心做一下.发现select2这个插件的功能可以满足当前需求. 在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回.可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效. 后来发现,select2插件在实现选中时是以数据中的id字段为准的.所以不管是json还是jsonp,ajax返回的数据都必须