像baidu那种在文本框中输入内容后，会自动检索相应内容的效果怎么实现？

http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx参考下这篇文章

解决方案 »

  1.   

    这是个简单的演示,输入"张"或"C"时有提示
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
        html, body{
            font-size:12px;
            color:#333333;
            font-family:"宋体";
        }
        .tb{
            border:1px solid #CCCCCC;
            background:#F8F8F8;
            border-collapse:collapse;
        }
        .tb td{
            border:1px solid #CCCCCC;
        }
        .tr{
            background:#EEEEEE;
            font-weight:bold;
        }
        #divResult{
            border:1px solid #006699;
        }
        #tbResult{
            border:0px;
        }
        #tbResult td{
            border:0px;
        }
        #tbResult tr{
            line-height:22px;
        }
        .td1{
            color:#111111;
            text-align:left;
            padding-left:5px;
        }
        .td2{
            color:#008000;
            text-align:right;
            padding-right:5px;
        }
    </style>
    </head><body>
    <script type="text/javascript">
        var data = ["张三", "李四", "CSDN", "CCTV", "张五"];
        var d, kw, oResult, oInput, currentRow;
        function $(id){
            return document.getElementById(id);
        }
        function getOffset(obj){
            var x = 0, y = 0;
            do{
                x += obj.offsetLeft;
                y += obj.offsetTop;
                
                obj = obj.offsetParent;
            }while(obj);
            return {x:x, y:y};
        }
        function initPosition(){
            oResult = $("divResult");
            oInput = $("txtKeyword");
            
            //设置位置和大小
            var point = getOffset(oInput);
            oResult.style.left = point.x + "px";
            oResult.style.top = point.y + oInput.offsetHeight + "px";
            oResult.style.width = oInput.offsetWidth - 3 + "px";
        }
        function hideResult(){
            oResult.style.display = "none";
        }
        function mover(row){
            //去掉当前行高亮
            if(currentRow > 0){
                var oRow = $("tbResult").rows[currentRow-1];
                mout(oRow);
            }
            row.style.backgroundColor = "#3366CC";
            row.cells[0].style.color = "#ffffff";
        }
        function mout(row){
            row.style.backgroundColor = "#ffffff";
            row.cells[0].style.color = "#111111";
        }
        function mclick(row){
            oInput.value = row.cells[0].innerHTML;
            hideResult();
        }
        function moveRow(dir){
            //去掉当前行高亮
            if(currentRow > 0){
                var oRow = $("tbResult").rows[currentRow-1];
                mout(oRow);
            }
            if(dir == "UP"){
                currentRow--;
                if(currentRow < 0){
                    currentRow = d.data.length;
                }
            }else{
                currentRow++;
                if(currentRow > d.data.length){
                    currentRow = 0;
                }
            }
            //还原关键词
            if(currentRow == 0){
                oInput.value = kw;
            }else{
                //设置高亮
                var oRow = $("tbResult").rows[currentRow-1];
                mover(oRow);
                
                oInput.value = oRow.cells[0].innerHTML;
            }
        }
        function Search(){
            var val = $("txtKeyword").value;
            oResult = $("divResult");
            
            if(val == "") {
                hideResult();
                return;
            }
            oResult.style.display = "";
            
            //添加数据
            var html = [], len = 0;
            html.push("<table width='100%' cellpadding='0' cellspacing='0' border='0' id='tbResult'>");
            
            for(var i=0; i<data.length; i++){
                if(data[i].indexOf(val) >= 0){
                    html.push("<tr onmouseover='mover(this)' onmouseout='mout(this)' onclick='mclick(this)'><td class='td1'>" + data[i] + "</td></tr>");
                    len ++;
                }
            }
            html.push("</table>");
            oResult.style.height = len * 22 + "px";
            oResult.innerHTML = html.join("");
        }
        window.onload = function(){
            initPosition();
        }
    </script>
    <input type="text" id="txtKeyword" name="txtKeyword" onkeyup="Search()" />
    <div id="divResult" style="display:none">
    </div>
    </body>
    </html>
      

  2.   

    提示框。。
    用ajax获取 用DIV输出
      

  3.   

    参考
    仿google_suggest：http://hansir.cn/blog/2008/20080616-27.html
      

  4.   

    谢谢，基本已经可以实现我的需求，但是我还想问一下：
    如果在我所要搜索的内容中有相同的内容，我想将备注中的内容也显示出来，可是在search.asp页面中我添加了了那个栏位的内容，可还是无法显示？请给菜鸟指点一下，谢谢
      

  5.   

    那你就在SQL语句里改呗sql="select lgid,lgmc from lg where lgmc like '%"&keyword&"%' or content like '%"&keyword&"%' order by lgid desc"
      

  6.   

    sql语句已经更改了
    应该是在xml文件里更改 需要现实的记录，可是也改了，不知道具体的怎么做
    请高手指点