自动完成提示框的实现示例代码

 

1 .前台代码：
<% @LANGUAGE = " JAVASCRIPT "  CODEPAGE = " 936 " %>
<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< style type = " text/css " >
<!--
.style1 {color: #FF0000}
.mouseOut
{
 font - size:12px;
 background: # 708090 ;
 color: #FFFAFA;
}

.mouseOver
{
 font - size:12px;
 background: #FFFAFA;
 color: # 000000 ;
}
-->
< / style>
      < script type = " text/javascript "  language = " javascript " >
         var  xmlHttp;
         var  completeDiv;
         var  inputField;
         var  nameTable;
         var  nameTableBody;
         var  flag = false ;

         function  createXMLHttpRequest() {
             if  (window.ActiveXObject) {
                xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
            }
             else   if  (window.XMLHttpRequest) {
                xmlHttp  =   new  XMLHttpRequest();                
            }
        }
        
         function  setflag(){
            flag  =   true ;
        }
        
         function  DisSelect()
        {
             if (flag == false )
            document.getElementById( " popup " ).style.display = " none " ;
        }

         function  initVars() {
            inputField  =  document.getElementById( " frmchangshang " );            
            nameTable  =  document.getElementById( " name_table " );
            completeDiv  =  document.getElementById( " popup " );
            nameTableBody  =  document.getElementById( " name_table_body " );
            document.getElementById( " popup " ).style.display = " block " ;
        }

         function  findNames() {
            initVars();
             if  (inputField.value.length  >   0 )
    {
                createXMLHttpRequest();
                 var  url  =   " search.asp?names= "   +  inputField.value;  
                xmlHttp.open( " GET " , url,  true );
                xmlHttp.onreadystatechange  =  callback;
                xmlHttp.send( null );
            }
     else
   {
                clearNames();
            }
        }

         function  callback() {
             if  (xmlHttp.readyState  ==   4 ) {
                 if  (xmlHttp.status  ==   200 )
                {
      try
                    {
                         var  name  =  xmlHttp.responseXML.getElementsByTagName( " name " )[ 0 ].firstChild.data;
                    }
                     catch (e)
                    {
                        document.getElementById( " popup " ).style.display = " none " ;
                        clearNames();
                    }
                    setNames(xmlHttp.responseXML.getElementsByTagName( " content " ));
                } 
                 else   if  (xmlHttp.status  ==   204 )
                {
                    clearNames();
                }
            }
        }
        
         function  setNames(the_names) {            
            clearNames();
             var  size  =  the_names.length;
            setOffsets();
             var  row,cell,spans;
             for  ( var  i  =   0 ; i  <  size; i ++ ) {
                 // var nextNode = the_names[i].firstChild.data;
     var  e  =  the_names[i];
     // 取得子节点内容，重新装载为数组
     var  nextNode = e.getElementsByTagName( " name " )[ 0 ].firstChild.data;
     // 创建tr，td，span元素
                row   = document.createElement( " tr " );
                cell  = document.createElement( " td " );
     // spans=document.createElement("span");
     // 设置cell属性
                cell.onmouseout  =   function () { this .className = ' mouseOver ' ; flag = false ;};
                cell.onmouseover  =   function () { this .className = ' mouseOut ' ; flag = true ;};
                cell.setAttribute( " bgcolor " , " #FFFAFA " );
                cell.setAttribute( " border " , " 0 " );
                 // cell.setAttribute("onmouseover","setflag()");
                cell.onclick  =   function () { populateName( this ); };
     // 将nextNode添加到td
     var  txtName  =  document.createTextNode(nextNode);
    cell.appendChild(txtName);
     // 装载隐藏数据到span元素
    row.appendChild(cell);
                nameTableBody.appendChild(row);
            }
        }

         function  setOffsets() {
             var  end  =  inputField.offsetWidth;
             var  left  =  calculateOffsetLeft(inputField);
             var  top  =  calculateOffsetTop(inputField)  +  inputField.offsetHeight;

            completeDiv.style.border  =   " black 1px solid " ;
            completeDiv.style.left  =  left  +   " px " ;
            completeDiv.style.top  =  top  +   " px " ;
            nameTable.style.width = " 400px " ;
        }
        
         function  calculateOffsetLeft(field) {
           return  calculateOffset(field,  " offsetLeft " );
        }

         function  calculateOffsetTop(field) {
           return  calculateOffset(field,  " offsetTop " );
        }

         function  calculateOffset(field, attr) {
           var  offset  =   0 ;
           while (field) {
            offset  +=  field[attr]; 
            field  =  field.offsetParent;
          }
           return  offset;
        }

         function  populateName(cell) {
     // 填充数据到web页面，cell---->td对象
            inputField.value  =  cell.firstChild.nodeValue;
            clearNames();
        }
         // 清除列表数组
         function  clearNames() {
             var  ind  =  nameTableBody.childNodes.length;
             for  ( var  i  =  ind  -   1 ; i  >=   0  ; i -- ) {
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);
            }
            completeDiv.style.border  =   " none " ;
        }
< / script>
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   / >
< title > Untitled Document < / title>
< / head>

< body >
< input name = " frmchangshang "  class = " InputText "  id = " frmchangshang "   style = " width:250px; "  onBlur = " DisSelect(); "  onKeyUp = " findNames(); "  size = " 50 "  maxlength = " 100 " >
                     & nbsp; < span class = " style1 " > 提示：输入关键字，程序自动从库中匹配您要找的记录，如果不存在自行填写
          < / span>
                     < div style = " position:absolute;top:0;left:0; "  id = " popup " >
                         < table id = " name_table "  bgcolor = " #FFFAFA "  border = " 0 "  cellspacing = " 0 "  cellpadding = " 0 " >             
                             < tbody id = " name_table_body " >< / tbody>
                         < / table>
                   < / div>
< / body>
< / html> 

2 .后台search.asp异步查询数据页面
把sql语句和要显示的字段改为自己的数据库相对应格式就可以了。
<!-- #include virtual = " conn.asp "   -->
<%
keyword = request.QueryString( " names " )
sql = " select lgid,lgmc from lg where lgmc like '% " & keyword & " %' order by lgid desc "
set rs = server.CreateObject( " adodb.recordset " )
rs.open sql,conn, 1 , 1
Response.ContentType = " text/xml "     
response.Write  " <?xml version= "" 1.0 ""  encoding= "" GB2312 ""  ?> "
response.Write  " <response> "
do   while  not rs.eof
response.Write  " <content> "
response.Write  " <name> " & rs( " lgmc " ) & " </name> "
' response.Write "<userid>"&rs("userid")&"</userid>"
' response.Write  " <startime> " & rs( " startime " ) & " </startime> "
' response.Write "<endtime>"&rs("endtime")&"</endtime>"
response.Write "</content>"
rs.movenext
loop
response.Write "</response>"
rs.close
set rs=nothing
%>