用AJAX兑现google输入自动完成的简单模拟-AJAX教程-爱易网页

用AJAX兑现google输入自动完成的简单模拟

日期：2014-05-16　浏览次数：20729 次

用AJAX实现google输入自动完成的简单模拟
比较简单的模拟,文本框输入CompanyName,然后
搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,
然后实现自动完成

四个文件

<!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" >
<head>
     <title>输入自动完成</title>
     <script language="javascript">
        //输入信息的文本框
        var txtInput;
        //下拉表当前选中项的索引 
        var currentIndex = -1; 
       
        //初始化参数,和下拉表位置
        function initPar()
         {
              txtInput = document.getElementById("txtCompanyName");
             //设置下拉表 相对于 文本输入框的位置 
              setPosition();
         } 
        
        //设置下拉表 相对于 文本输入框的位置
        function setPosition()
         {
            var width = txtInput.offsetWidth;
            var left = getLength("offsetLeft");
            var top = getLength("offsetTop") + txtInput.offsetHeight;
           
             divContent.style.left = left + "px";
             divContent.style.top = top + "px"; 
             divContent.style.width = width + "px";
         } 
        
       //获取对应属性的长度 
        function getLength(attr)
         {
            var offset = 0;
            var item = txtInput;
            while (item)
             {
                 offset += item[attr];
                 item = item.offsetParent;
             } 
            return offset; 
         } 

        //自动完成
        function autoComplete()
         {
            //如果按下 向上, 向下 或 回车
            if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
             { 
                //选择当前项 
                 selItemByKey();
             } 
            else //向服务器发送请求
             { 
                //如果值为空 
                if (txtInput.value == "")
                 {
                     divContent.style.display='none'; 
                    return;
                 } 
                //恢复下拉选择项为 -1 
                 currentIndex = -1; 

                //开始请求
                 requestObj = new ActiveXObject("Microsoft.XMLHTTP");
                 requestObj.onreadystatechange = displayResult;
                 requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true);
                 requestObj.send(txtInput.value); 
             } 
         } 
        
        //显示结果 
        function displayResult()
         {
             if (requestObj.readyState == 4)
              {
                      showData();
                      divContent.style.display = "";
              } 
         } 
        
        //显示服务器返回的结果 ,并形成下拉表
        function showData()
         {
             //获取数据 
             var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
              doc.loadXML(requestObj.responseText);
             
             //显示数据的xslt 
             var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
              docStyle.async = false; 
              docStyle.load("list.xslt");
              
             var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");
              docTemplate.stylesheet = docStyle;
             
             //通过xslt转换xml数据 
             var processor = docTemplate.createProcessor();
              processor.input = doc;
              processor.transform();
             var res = processor.output;
             
             //显示转后后的结果
              divContent.innerHTML = res; 
         } 
        
        //通过键盘选择下拉项 
        function selItemByKey()
         {
            //下拉表 
            var tbl = document.getElementById("tblContent"); 
            if (!tbl)
             {
                return; 
             } 
            //下拉表的项数
            var maxRow = tbl.rows.length; 
            //向上 
            if (event.keyCode == 38 && currentIndex > 0)
             {
                  currentIndex--;
             } 
            //向下

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

用AJAX兑现google输入自动完成的简单模拟

相关资料更多>

推荐阅读更多>