谁给我说说类似百度的文本输入提示

Question

在文本框里输入点信息后就会提示出可能的完整信息
比如我的某个表里有一个字段是人的名字，当我在文本框里输入某个字的时候，就会帮我把后面的都列出来
麻烦给我大概说说其原理和使用到的技术

Answer 1

AJAX 异步交互（不用点击提交，就能调用后台程序）就是说你在text框中的内容变化时，程序已经与后台进行交互了！
具体细 百度 AJAX

Answer 2

具体代码是这个样子的。<script language="javascript" type="text/javascript">var xmlHttp=false;//***********
function createRequest(prefixID,flag) {
//alert("调用createRequest function");try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  //alert("Create XMLHttpRequest Sucess! By xmlHttp = new ActiveXObject('Msxml2.XMLHTTP') ");
} catch (e) {
  try {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
  xmlHttp = false;
  }
}if (!xmlHttp && typeof XMLHttpRequest != 'undefined') 
{
  xmlHttp = new XMLHttpRequest();
}//alert("prefix id is: "+prefixID);
//调用函数if(flag=='1')
getReplyInfo(prefixID);
else if(flag=='2')
deleteMessageInfo(prefixID);
}
//************//回复留言
 function getReplyInfo(prefixID) {
  //alert("调用getReplyInfo function");
 
  var muReply = document.getElementById(prefixID+"replyID").value;
  //alert(muReply);
  var url = "/sxzlc/messageboard/adminReply.action?id=" + prefixID+"&muReplay="+muReply;
  url=encodeURI(url); 
  url=encodeURI(url); 
//alert(url);
try{
xmlHttp.open("GET", url, true);
//xmlHttp.setRequestHeader("Content-Type","charset=gb2312");
//alert("open Sucess");
}catch(e3){
alert("open Fail");
}
xmlHttp.onreadystatechange = updatePage;
try{
xmlHttp.send(null);
//alert("send Sucess");
}catch(e4){alert("send Fail");
}
   
  }//不回复，直接删除用户的留言
 function deleteMessageInfo(prefixID) {
  //alert("调用deleteMessageInfo function");
  var url = "/sxzlc/messageboard/deleteMessage2.action?id=" + escape(prefixID)+"&xmlHTTP="+escape('sxzlc');
   
  //alert(url);
try{
xmlHttp.open("GET", url, true);
//alert("open Sucess");
}catch(e3){alert("open Fail");
}
xmlHttp.onreadystatechange = updatePage;
try{
xmlHttp.send(null);
//alert("send Sucess");
}catch(e4){alert("send Fail");
}
   
   
  }
//************
function updatePage() {
  if (xmlHttp.readyState == 4) {
  //alert("repopnse had achieve / complete")
  if (xmlHttp.Status == 200) {
  {
  var aaa = xmlHttp.responseText.split("/");
  if(aaa[1]==1)
  hiddenReply(aaa[2]);
  else
  alert(aaa[0]);
  }
 
  }
  }
  else {
  //alert("回复失败");
  }  
}
//*****************

Answer 3

刚才那个太复杂了，还带有别的功能，一下是一个验证注册时用户名存在的功能。
手写代码如：<script type="text/javascript">
function createXmlHttpRequest()
{
if(window.ActiveXObject)//如果是IE浏览器
{
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
}var xmlHttpRequest;
function checkUserExists(oCtl)
{
var uname=oCtl.value;
if(!uname)
{
alert("用户名不能为空");
oCtl.focus();
return;
}
//发送请求到服务器，判断用户名是否存在
var url="/MyAjax/login.do?method=execute&uname="+uname;
//1.创建XMLHttpRequest组建
xmlHttpRequest=createXmlHttpRequest();
//2.设置回调函数
xmlHttpRequest.onreadystatechange=haoleJiaoWo;
//3.初始化XMLHttpRequest组件
xmlHttpRequest.open("GET",url,true);
//4.发送请求
xmlHttpRequest.send(null);
}function haoleJiaoWo()
{alert(xmlHttpRequest.status);
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
var b=xmlHttpRequest.responseText;
if(b=="true")
{
alert("存在");//这里控制div
}else
{
alert("NO");//这里控制div}
}
}
</script><input type="text" name="uname" onblur="checkUserExists(this)"/> 
var b=xmlHttpRequest.responseText;//后台使用流的write就行！

Answer 4

AJAX动态刷新，每输入一个字就动态查询一下匹配的东西然后用脚本写在页面输入值的下边。我用的查询数据库效率慢了点，百度用的数据从哪来的就不太清楚了