设计当用户在文本框中输入关键字时，浏览器会自动从后台数据中查询匹配数据，并迅速显示在下面的下拉菜单中，以供输入选择，当从下拉菜单中选择备选词之后，选取结果会填入文本框，避免手动输入。
当输入关键字时，Ajax会实时把该词发送到后台，由后台与指定的数据进行比较，如果发现有匹配的信息，则组合成下拉列表的结构响应给客户端，最后由JavaScript脚本把这些文本信息插入到页面中。
【示例】
-
服务器端请求文件
//test.asp <% dim a(20) a(1)="CSS: Cascading Style Sheets，层叠格式表" a(2)="CGI（Common Gateway Interface，通用网关接口）" a(3)="DCD: Document Content Description for XML: XML文件内容描述" a(4)="DTD: Document Type Definition，文件类型定义" a(5)="HTML（HyperText Markup Language，超文本标记语言）" a(6)="JVM: Java Virtual Machine, Java虚拟机" a(7)="SGML: Standard Generalized Markup Language，标准通用标记语言 " a(8)="XML: Extensible Markup Language（可扩展标记语言）" a(9)="XSL: Extensible Style Sheet Language（可扩展设计语言）" a(10)="DNS（Domain Name System，域名系统）" a(11)="IMAP4: Internet Message Access Protocol Version 4，第四版因特网信息存取协议 " a(12)="Internet（因特网）" a(13)="IP（Internet Protocol，网际协议）" a(14)="MODEM（Modulator Demodulator，调制解调器）" a(15)="POP3: Post Office Protocol Version 3，第三版电子邮局协议" a(16)="RDF: Resource Description Framework，资源描述框架" a(17)="SNMP（Simple Network Management Protocol，简单网络管理协议）" a(18)="SMTP（Simple Mail Transfer Protocol，简单邮件传输协议）" a(19)="VPN: virtual private network，虚拟局域网" a(20)="WWW（World Wide Web，万维网，是因特网的一部分" Response.AddHeader "Content-Type","text/html;charset=gb2312" q=request.querystring("q") if len(q)>0 then hint="" for i=1 to ubound(a) x1=ucase(mid(q,1,len(q))) x2=ucase(mid(a(i),1,len(q))) if x1=x2 then if hint="" then hint="<option value="""&a(i)&""">"&a(i)&"</option>" else hint=hint & "<option value="""&a(i)&""">"&a(i)&"</option>" end if end if next end if if hint="" then response.write("<select><option>没有匹配对象</option></select>") else response.write("<select onblur='ok(this)' onchange='ok(this)'>"&hint&"</select>") end if %> -
HTML
<h1>快速匹配搜索</h1> <form> <label for="txt1">关 键 词:</label> <input name="txt1" type="text" id="txt1" onkeyup="check(this.value)" size="60"><input name="" type="submit" value="提交"> </form> <p>快速匹配: <span id="txtHint"> <select> <option>请输关键词</option> </select> </span></p> -
JS
// 封装创建XMLHttpRequest对象 function createXMLHTTPObject() { var XMLHttpFactories = [ function () {return new XMLHttpRequest()}, function () {return new ActiveXObject("Msxml2.XMLHTTP")}, function () {return new ActiveXObject("Msxml3.XMLHTTP")}, function () {return new ActiveXObject("Microsoft.XMLHTTP")} ]; var xmlhttp = false; for (var i = 0; i < XMLHttpFactories.length; i ++ ) { try { xmlhttp = XMLHttpFactories[i](); } catch (e) { continue; } break; } return xmlhttp; } //封装异步请求函数 function request(url, callback, data) { var xmlHttp = createXMLHTTPObject(); if ( ! xmlHttp) return; var method = (data) ? "POST" : "GET"; xmlHttp.open(method, url, true); xmlHttp.setRequestHeader('User-Agent', 'XMLHTTP/1.0'); if (data) xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState != 4) return; if (xmlHttp.status != 200 && xmlHttp.status != 304) { alert('HTTP请求错误 ' + xmlHttp.status); return; } callback(xmlHttp); } if (xmlHttp.readyState == 4) return; xmlHttp.send(data); } function check(str){ if (str.length > 0) { var url = "test.asp?q=" + str; request(url , callback ); } } function callback( xhr ) { var info = document.getElementById("txtHint"); info.innerHTML = xhr.responseText; } function ok(o){ var o1 = document.getElementById("ok1"); document.getElementById("txt1").value = o.value; }