仿google搜索提示(可以连数据库)

页面``很简单,就建立一个input带id名称的,

<script language="javascript">
function setdatasearch(){
  var query =document.getElementById("searchtext").value;
  var url = "${ctx}/pages/tml/equipinfo.do?method=searchdata&query="+query;
 
  searchdata(url,"searchtext");
 
}
</script>

<input type="text" id="searchtext" name="searchtext" οnkeyup="setdatasearch();"/>

javascript的脚本search.js

//2007.12.21 linjiasheng
//使用方法 searchdata(url,inputid)
//URL就是连接数据库的地址,在后台要定义格式为<data><query></query></data>的xml格式文本输出,<query>是多行输出的.
//inputid就是jsp页面的text的ID名称

document.write('<span id="draw_findInSelect"></span>');
var xmlHttp;

var arrA ; //全局的数组
var textinput;  //传入的text的ID名称
   
function createXMLHttpRequest()
{
 if (window.ActiveXObject)
  {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest)
  {
     xmlHttp= new XMLHttpRequest();
  }
}
//主方法
function searchdata(url,inputid)
{
  createXMLHttpRequest();
  textinput=inputid;
  xmlHttp.open("GET",url,true);
  xmlHttp.onreadystatechange=initdatahandle;
  xmlHttp.send(null);
 
}
//数据返回控制
function initdatahandle()
{
  if (xmlHttp.readyState == 4)
 {
 
 if (xmlHttp.status == 200)
    {
   
 var data = xmlHttp.responseXML.getElementsByTagName("data")[0];
 var query=data.getElementsByTagName("query");
 initArray(query);   //初始化数据
 
 createdivcss();     //建立DIV的CSS
 clearrow();     //清除之前在table的数据
 creatediv();     //在DIV中加入搜索的数据
 //假如返回的长度>0,显示DIV
 if(query.length>0){     
 
 document.getElementById("searchLayer1").style.display='block';
 }else{
 document.getElementById("draw_findInSelect").removeChild(document.getElementById("searchLayer1"));
 }
 }
 }
}

function creatediv()
{

  var lay1=document.getElementById("searchLayer1");
  var texts=document.getElementById(textinput);
 
  var table=document.getElementById("listtable");

 
  var table_body =table.getElementsByTagName("tbody").item(0);

  for(var i=0;i<arrA.length;i++){

  if(arrA[i].name.indexOf(texts.value) >= 0){

    var new_row=createRow(arrA[i].name);
     table_body.appendChild(new_row);
   }
 }
 
 
}

function createdivcss(){

  var where=draw_findInSelect;
 
  var target=document.getElementById("searchtext");
  var offset = parseInt(target.currentStyle.borderWidth);
  itop  = target.getBoundingClientRect().top + target.offsetHeight - offset;
  ileft = target.getBoundingClientRect().left - offset;
  iwidth = target.offsetWidth;
  iheight = target.offsetHeight;
  var divHTML='<div id="searchLayer1" style="top:'+itop+';left:'+ileft+';width:'+iwidth+';height:'+iheight+';position:absolute;z-index:2;border: 1pt solid #000000;display:none;">'
  divHTML +='<table name="listtable" id="listtable" border="0" ><tbody><tr><td></td><tr></tbody></table></div>';
  where.innerHTML=divHTML;
 
}

function initArray(data)
{
arrA=new Array();
for(var i=0;i<data.length;i++){
arrA.push({name:data[i].firstChild.data});
 }
}

function createRow(message)
{
 
  var row = document.createElement("tr");
  var cell = document.createElement("td");

  var div =document.createElement("<div οnclick='selectvalue(this);' οnmοuseοver='selectFX(this)' style='width:100%'/>");
  div.innerHTML=message;
 
  cell.appendChild(div);
  row.appendChild(cell);
 
  return row;

}

function clearrow()
{
 var table=document.getElementById("listtable");
  var table_tbody=table.childNodes.item(0);
  var rowlength=table_tbody.childNodes.length;
  
 
  for(var i=0;i<rowlength;i++){
  var table_tr=table_tbody.childNodes.item(0);
  table_tbody.removeChild(table_tr);
 
  }

}
//在DIV中选择数据,填入TEXT INPUT中
function selectvalue(obj)
{
 
  var text=document.getElementById("searchtext");
  text.value=obj.innerHTML;
  var lay1=document.getElementById("searchLayer1");
  lay1.style.display='none';
}
//选择样式
var lastOver_findInSelect = null
function selectFX( which ){
 obj = lastOver_findInSelect
 if( obj != null && which != obj ){
  obj.style.cssText="color:windowtext;background:white;"
 }
 which.style.cssText="color:highlighttext;background:highlight;"
 lastOver_findInSelect = which
}

 

 

 

 我的后台是ssh的框架,后台的action代码:
public void searchdata(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {
  String query= request.getParameter("query");
  
  Page page = equipinfoManager.getPage(request);
  List querylist=new ArrayList();
     List<Equipinfo> list = (List<Equipinfo>) (page.getResult());
     for(int i=0;i<list.size();i++){
      Equipinfo equipinfo=(Equipinfo)list.get(i);
      String id=equipinfo.getId();
      
      if(id.startsWith(query.trim())){                             //查找开头是以传入query的数据
       
      querylist.add(id);                                               
      }
     }
     try
  { 
   
   response.setContentType("text/xml;charset=UTF-8");
   response.setHeader("Cache-Control", "no-cache");
   PrintWriter out = response.getWriter();
   out.write("<data>");
   if(querylist!=null){
   for(int i=0;i<querylist.size();i++){
   out.write("<query>"+querylist.get(i)+"</query>");
  
   }
   }
   out.write("</data>");
   out.close();
   
  }
  catch(Exception e)
  {
   e.printStackTrace();
  }
  
 }