AJAX实现google输入自动完成的简单模拟 · 搜Asp.net 编程学习·编程技术资料网

<!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--;
            }
            //向下
            else if (event.keyCode == 40 && currentIndex < maxRow-1)
            {
                 currentIndex++;
            }
            //回车
            else if (event.keyCode == 13)
            {
                selValue();
                return;
            }

            clearColor();
            txtInput.value = tbl.rows[currentIndex].innerText;
            //设置当前项背景颜色为blue 标记选中
            tbl.rows[currentIndex].style.backgroundColor = "InfoBackground";
        }

        //清除下拉项的背景颜色
        function clearColor()
        {
             var tbl = document.getElementById("tblContent");
             for (var i = 0; i < tbl.rows.length; i++)
             {
                    tbl.rows[i].style.backgroundColor = "";
             }
        }

        //选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值
        function selValue()
        {
            if (event.keyCode != 13)
            {
                var text = event.srcElement.innerText;
                txtInput.value = text;
            }
            initList();
        }

        //文本框失去焦点时设置下拉表可见性
        function setDisplay()
        {
            //获取当前活动td的表格
            if (document.activeElement.tagName == "TD")
            {
                 var tbl = document.activeElement.parentElement.parentElement.parentElement;
                //如果不是下拉表,则隐藏下拉表
                if (tbl.id != "tblContent")
                {
                    initList();
                }
                return;
            }

            initList();

        }

        function initList()
        {
            divContent.style.display='none';
            divContent.innerHTML = "";
            currentIndex = -1;
        }
    </script>
</head>
<body onload="initPar()">
CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()" onblur="setDisplay();" style="width:400px"/>

<div id="divContent" style="display:none; position:absolute; ">
</div>
</body>
</html>