[转] 利用AJAX实现搜索提示功能 （关键字自动匹配功能）

利用AJAX实现搜索提示功能 （关键字自动匹配功能）
2008-05-23 07:44
关于网友提到代码不能在FIREFOX下运行的问题的解决：

1、由于FF各方面的安全性，它不支持跨域的访问，应此注意在调用跨域脚本代码之前加上

document.domain="http://www.yourdomain.com/" ，不过本实例不需要。

2、在FF下，xmlhttpRequest.send方法必须加上参数null，IE下不需要。另外，xmlhttpRequest.open方法的O要小写open，Send 改为send。

3、初始化对象后，注意加上xmlhttpRequest.overrideMimeType('text/xml'); 以便在 错误控制台 看到不符合XML错误的提示。

4、如果是netscape浏览器，注意加上 netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

5、修改代码 Response.Write("这|下|你|就|满足|了|吧|继续关注") 显示的数据符合XML格式。然后在前台用JAVASCRIPT解析XML。

谢谢大家关注！


注：好多朋友向我发EMAIL，要求源代码，在此感谢他们对这一技术的关注，从今天（08-01-22）开始，我不再发了。有时间把完整的代码贴出来。

希望大家一起学习JAVASCRIPT。。。


原文如下：

希望需要的人慢慢的看，不能急噪。不清楚可以电子邮件给我。

“谷歌主页搜索增加信息提示功能，在用户输入信息时会获得相应的提示与该提示搜索结果数量；其中，提示的数量一般保持在10个内。用户点击提示信息能直接搜索信息，这样能提高信息搜索准确性。”

当然，我们不知道GOOGLE的代码，但是我们也可以实现同样的效果，下面根据自己的实践，一步一步来说，对自己来说，可能更熟练，也希望大家熟练的掌握这一技术。

AJAX是个老话题了，在这里就不费口舌了，直接入题。为了代码的完整性，我尽量写完整。

首先，在HTML页面上放一个文本框。注意要放在form里面哦，属性methord为POST。
<input id="KProvince" style="width: 150px;" autocomplete="off" οnkeyup="beKeyUp();" />
注意这里面有一个属性 autocomplete="off"，它的目的的关掉文本框的自动提示，必须要，不然你以前在文本框输入的记录会遮挡要提示的数据。onkeyup 方法是在键盘按下后松开执行，正好实现 即时输入，即时调用。更多请在BAIDU搜索详细的解释。
第二步，在文本框下面放一个DIV，注意样式。z-index属性不能少，不然不能覆盖它下面的其它select控件。
<div id="search_suggest" style="position:absolute;z-index:1;"></div>

下面来开始写JAVASCRIPT。
首先创建XMLHttpRequest对象。我把它写成一个方法，以免多次调用。对它我不做解释，更多请在BAIDU搜索详细的解释。
   var array=new Array(); //定义一个全局变量数组，用来存放拆分字符串的值，后面具体介绍。
        var zz=-1; //此为指针，后面用到
function xmlHttpInitializtions()
        {
            try
            {
                xmlhttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    xmlhttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e2)
                {
                    xmlhttpRequest = false;
                }
            }
            if (!xmlhttpRequest && typeof XMLHttpRequest != 'undefined')
            {
                xmlhttpRequest = new XMLHttpRequest();
            }
        }
第二步，创建beKeyUp方法，正是键盘按下后松开时的方法，在文本框那里调用。
   function beKeyUp()
        {
            var key = document.getElementById("KProvince").value;
            if(key.length>0)//有值才POST，这里最好加个Trim()方法，但是JAVASCRIPT没有现成的方法，自己定义。
            {
                xmlHttpInitializtions();
                xmlhttpRequest.Open("POST","Test_Ajax.aspx?key=" + key,true);//POST
                xmlhttpRequest.onreadystatechange=stateChange;//返回状态调用方法stateChange
                xmlhttpRequest.Send();
            }
        }
        function stateChange()
        {
            if(xmlhttpRequest.readystate==4)
            {
                if(xmlhttpRequest.status==200)
                {
                    var responseStr=xmlhttpRequest.responseText;//获取返回值
                    if(responseStr.length>0)//返回值不为空才执行下面的代码
                    {
                        array=responseStr.split('|');//根据‘|’拆分，根据自己任意特殊字符，初始化数组
                        positionDiv();//调用方法，定位DIV显示，具体见方法解释
    document.getElementById("search_suggest").innerHTML="";//每次清空DIV内容
                        for(var i=0;i<array.length;i++)
                        {
                            if(array[i]!="")//项值不为空，组合DIV，每个DIV有onmouseover、onmouseout、onclick对应事件
                            {
                                document.getElementById("search_suggest").innerHTML+="<div id='item" + i + "' class='itemBg' οnmοuseοver='beMouseOver(" + i +")' οnmοuseοut='beMouseOut(" + i + ")' οnclick='beClick(" + i + ")'>" + array[i] + "</div>";
                            }
                        }
    //最后一个DIV显示 关闭 效果 onclick方法
                        document.getElementById("search_suggest").innerHTML+="<div class='item_button' οnclick='hiddenDiv();'><font color='#999999'>关闭</font></div>";
                        document.getElementById("search_suggest").style.display="inline";
                    }
                    else
                    {
                        document.getElementById("search_suggest").style.display="none";
                    }
                }
            }
        }
        //定位DIV显示
function positionDiv()
        {
              var DivRef= document.getElementById("search_suggest");
              DivRef.style.position = "absolute";
              var t=document.getElementById("KProvince");
              DivRef.style.top= getAbsolutePos(t).y;//相对文本框的TOP高度，方法见下面
              DivRef.style.left= getAbsolutePos(t).x ;//相对文本框的LEFT宽度
              DivRef.style.height=array.length * 20;//DIV的高度等于每行20个象素乘行数（也就是数组的长度，体现全局数组的作用，不然要传入数组长度的参数）
        }
//实现最后一个DIV 关闭 onclick方法
function hiddenDiv()
        {
            document.getElementById("search_suggest").style.display="none";
        }
//定位方法，不做解释
function getAbsolutePos(el)
        {
            var SL = 0, ST = 0;
            var is_div = /^div$/i.test(el.tagName);
            if (is_div && el.scrollLeft) SL = el.scrollLeft;
            if (is_div && el.scrollTop) ST = el.scrollTop;
            var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
            if (el.offsetParent)
            {
                var tmp = this.getAbsolutePos(el.offsetParent);
                r.x += tmp.x;
                r.y += tmp.y;
            }
            return r;
        }

最后是鼠标效果的方法。
        //函数鼠标经过效果       
        function beMouseOverEFF(i)
        {
            if ((i>=0)&(i<=array.length-1))
            {
                document.getElementById("item" + i).className="item_high";
            }
        }

        //函数鼠标移开效果
        function beMouseOutEFF(i)
        {
            if ((i>=0)&(i<=array.length-1))
            {
                document.getElementById("item" + i).className="item_normal";
            }
        }

        //函数鼠标经过
        function beMouseOver(i)
        {
            document.getElementById("KProvince").focus();
            beMouseOutEFF(zz);
            zz=i;
            beMouseOverEFF(zz);
        }

        //函数鼠标移开
        function beMouseOut(i)
        {
            beMouseOutEFF(i);
        }
        //函数单击
        function beClick(i)
{
            document.getElementById("KProvince").value=array[i];
            document.getElementById("search_suggest").style.display="none";
            document.getElementById("KProvince").focus();
        }

对应的样式如下：
.item_normal
{
    BORDER-LEFT: #666 1px solid;
    BORDER-RIGHT: #666 1px solid;
    width:150px;
    background-color:#ffffff;
    overflow:hidden;
}
.itemBg
{
    BORDER-LEFT: #666 1px solid;
    BORDER-RIGHT: #666 1px solid;
    cursor:default;
    background-color:#ffffff;
    width:150px;
}
.item_high
{
    background-color:#326BC5;
    cursor:default;
    width:150px;
    color:white;
}
.item_button
{
    BORDER-LEFT: #666 1px solid;
    BORDER-RIGHT: #666 1px solid;
    BORDER-BOTTOM: #666 1px solid;
    text-align:right;
    background-color:#ffffff;
    width:150px;
    cursor:hand;
}
.suggest_hidden
{
    display:none;
}

至于POST 的页面Test_Ajax.aspx该怎么写，我相信都知道。写个简单的能实现的...注意该页面前端的HTML代码都不要
if(Request.QueryString["key"] != null)
{
Response.Write("这|下|你|就|满|足|了|吧");//你可以从数据库读取，打印出来就OK
}
到此，功能实现了，具体调整根据自己的爱好修改。本地测试通过......
如果还不能实现的话，请EMAIL给我，把源代码发给你BB。（xiaohui_liu0406@163.com）