搜索建议--AJAX （ASP.NET 异步完成）javascript 实现代码

现在有很多javascript框架可以实现此功能。但是javascript具体怎么实现的，我们还是看源代码来分析吧。

javascript代码：

var hasError=true;
var XMLHttpReq;
var mydiv;
var myframe;
var showtable;
var showbody;
var tableBox;
var tableList;

window.onload = function(){
 mydiv=document.getElementById("mydiv");
 myframe=document.getElementById("myframe");
 showtable= document.getElementById("mytable");
 showbody= document.getElementById("mytbody");
} 
function createXMLHttp() {
   if(window.XMLHttpRequest) { //Mozilla 浏览器
          XMLHttpReq = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) { // IE浏览器
      try {
         XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e){
         try{
              XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {}
      }
   }
}
// 处理返回匹配信息函数
function processResponse() {
    if (XMLHttpReq.readyState == 4) { // 判断对象状态
        if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
           tableList = XMLHttpReq.responseXML.getElementsByTagName("tableInfo");
           showTable(tableList,tableBox);
        }
    }
}
function getInput(evt){
    //debugger;
 var myevent=evt?evt:window.event;
 var keycode=myevent.keyCode?myevent.keyCode:myevent.which;
 var source = myevent.target?myevent.target:myevent.srcElement;
 tableBox = source; 
 var text = escape(tableBox.value);   
 if(keycode==9 || keycode==38 || keycode==40){
     if(myframe.style.display != "none"){
      moveFocus(myevent,keycode); 
      return;       
     }
 }
 if(keycode == 27){
     clearNames();
     tableBox.value = text;
     return;
 } 
    if(tableBox.value.length > 0 ) {
         createXMLHttp();   
         var url = "../../XMLRequest/DataTableSubject.aspx?strWhere=" + text;    //
         XMLHttpReq.open("GET", url, true);
         XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
         XMLHttpReq.send(null); // 发送请求
    }
    else{
        clearNames();
    }
}
function showTable(dataTables,obj){ 
 clearNames(); 
 if(dataTables == null || dataTables.length==0){
  return;
 }
 var count = dataTables.length;
 var showCount = count;
 setOffsets(obj);
 var row, cell, txtNode;
 //添加第一行
 row = document.createElement("tr");
 cell = document.createElement("td");
 cell.setAttribute("color", "#565656"); 
 cell.setAttribute("font-weight","bold");
 if(count > 20){
     showCount = 20;
 }
 txtNode = document.createTextNode("搜索到"+count+"条信息，当前显示"+showCount+"条");
 cell.appendChild(txtNode);
 row.appendChild(cell);
 showbody.appendChild(row); 
 for (var i = 0; i < showCount; i++) {
   var nextNode = dataTables[i].childNodes[1].firstChild.nodeValue;
   var toolTip = "Code:" + dataTables[i].childNodes[1].firstChild.nodeValue
         + "Name:" + dataTables[i].childNodes[2].firstChild.nodeValue  
         + "en_Name:" + dataTables[i].childNodes[3].firstChild.nodeValue;
   var tt_id = dataTables[i].childNodes[0].firstChild.nodeValue;
  
   row = document.createElement("tr");
   cell = document.createElement("td");   
   cell.onmouseout = function() {
    this.className='mouseOut';
   };
   cell.onmouseover = function() {
       this.title = toolTip;
    this.className='mouseOver';
      completeField(this,obj);
   };
   cell.setAttribute("align", "left");
   cell.setAttribute("border", "0");
   cell.setAttribute("tag",tt_id);
   cell.onclick = function() {
    completeField(this,obj);
    clearNames();
   } ;
   txtNode = document.createTextNode(nextNode);
   cell.appendChild(txtNode);
   row.appendChild(cell);
   showbody.appendChild(row); 
   } 
   myframe.height=showtable.clientHeight - 3;
   myframe.width=showtable.clientWidth - 2;
   myframe.style.display="block";
}
//设置显示位置               
function setOffsets(obj) {
   //completeTable.style.width = "auto";    //显示自动完成的提示框宽度自动伸展或缩小
   var left = calculateOffset(obj, "offsetLeft");
   var top = calculateOffset(obj, "offsetTop") + obj. offsetHeight;
   mydiv.style.left = left + "px";
   mydiv.style.top = top + "px";
}
//计算显示位置
function calculateOffset(field, attr) {
   var offset = 0;
   while(field) {
    offset += field[attr];
    field = field.offsetParent;
   }
   return offset;
}
//清除自动完成行
function clearNames() {
   var ind = showbody.childNodes.length;
   for (var i = ind - 1; i >= 0 ; i--) {
    showbody.removeChild(showbody.childNodes[i]);
   }
   mydiv.style.border = "none";
   myframe.style.display="none";
}
//填写输入框
function completeField(cell,textbox) {
    var code=cell.firstChild.nodeValue;
 var tid = textbox.id;
 var sid = "hfTable";
 var hidebox ;
 textbox.value = code;
 textbox.tag = cell.tag;
 tid = tid.charAt(tid.length-1);
 if(tid == 'A' || tid == 'B'){
     sid += tid;
 }
    hidebox = document.getElementById(sid);
    hidebox.value = cell.tag;
 bindField(textbox);
}
function moveFocus(evt,keyCode){
    //debugger;
 if(!showbody || showbody.rows.length == 0){
  return ;
 }
 var isFocus = false;
 var rows = showbody.rows.length;
 for(var i = 1; i< rows; i++){
     var curCell = showbody.rows[i].cells[0];   
     if(curCell.className == 'mouseOver'){
         if(keyCode == 38){
             if(i ==1){
     showbody.rows[rows-1].cells[0].className = 'mouseOver';
     completeField(showbody.rows[rows-1].cells[0],tableBox);
    }
    else{
     showbody.rows[i-1].cells[0].className = 'mouseOver';
     completeField(showbody.rows[i-1].cells[0],tableBox);
    }
         }
   if(keyCode == 9 || keyCode == 40){
             if(i == rows-1){
     showbody.rows[1].cells[0].className = 'mouseOver';
     completeField(showbody.rows[1].cells[0],tableBox);
    }
    else{
     showbody.rows[i+1].cells[0].className = 'mouseOver';
     completeField(showbody.rows[i+1].cells[0],tableBox);
    }
         }
   curCell.className = 'mouseOut';
   isFocus = true;
   break;
     }
 }
 if(!isFocus){
  showbody.rows[1].cells[0].className = 'mouseOver';
  completeField(showbody.rows[1].cells[0],tableBox);
 }
}
function showRowText(){
 if(!showbody || showbody.rows.length == 0){
  return ;
 }
 var rows = showbody.rows.length;
 for(var i = 1; i< rows; i++){
     var curCell = showbody.rows[i].cells[0];   
     if(curCell.className == 'mouseOver'){
   completeField(curCell,tableBox);
   break;
     }
 }  
}
function setRowFocus(evt){
//debugger;
 var myevent=evt?evt:window.event;
 var source = myevent.target?myevent.target:myevent.srcElement;
 var id = source.id;
 if(id.indexOf('show')<0 && id !='mydiv' && id != 'myframe'){
  clearNames();
 }
}
document.οnclick=setRowFocus;

异步完成ASP页面：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Web;
using System.Xml.Linq;
using System.Text;
using SDDS.BLL;
using SDDS.Model;

public partial class XMLRequest_DataTableSubject : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string content = Request.QueryString["strWhere"];
        string strWhere = "table_code like '" + content + "%' or table_name like '" + content + "%' or table_en_name like '" + content + "%'";
        //设置响应
        Response.Clear();
        Response.ContentType = "text/xml";     //设置输出的格式为XML
        Response.Charset = "UTF-8";              //设置输出的编码为UTF-8
        this.GetXmlData(strWhere);
        Response.End();
    } //Page_Load

    private void GetXmlData(string strWhere)
    {  
        //获取需要的搜索建议对象集合
        TDataTableManager manager = new TDataTableManager();
        DataTable dt = manager.SelectTDataTableByByWhere(strWhere);
        //这是用来获取下拉列表框中下面提示的项目数据，获取的数据用XML格式输出
        StringBuilder xmlData = new StringBuilder(); 
        if (dt != null && dt.Rows.Count > 0)
        {
            xmlData.AppendLine(@"<?xml version='1.0' encoding='UTF-8' ?>");
            xmlData.AppendLine(@"<response>");
            //添加搜索建议内容信息
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                //获取数据
                string tt_id = dt.Rows[i]["tt_id"].ToString();
                string table_code = dt.Rows[i]["table_code"].ToString();
                string table_name = dt.Rows[i]["table_name"].ToString();
                string table_en_name = dt.Rows[i]["table_en_name"].ToString();

                xmlData.AppendLine(@"<tableInfo>");

                xmlData.AppendLine(@"<tt_id>" + tt_id);
                xmlData.AppendLine(@"</tt_id>");
                xmlData.AppendLine(@"<table_code>" + table_code);
                xmlData.AppendLine(@"</table_code>");
                xmlData.AppendLine(@"<table_name>" + table_name);
                xmlData.AppendLine(@"</table_name>");
                xmlData.AppendLine(@"<table_en_name>" + table_en_name);
                xmlData.AppendLine(@"</table_en_name>");

                xmlData.AppendLine(@"</tableInfo>");
            } //for
            xmlData.AppendLine(@"</response>");
        } //if
        Response.Write(xmlData.ToString());
    }
} //XMLRequest_DataTableSubject

显示页面：

略