像百度搜索框一样，在文本框中输入字符后，自动出现提示下拉框 [问题点数

最新推荐文章于 2016-12-06 11:43:00 发布
胖胖爱家
最新推荐文章于 2016-12-06 11:43:00 发布
阅读量3.5k
点赞数
分类专栏： js / jq / vue
js / jq / vue 专栏收录该内容
85 篇文章 0 订阅
订阅专栏
http://bbs.csdn.net/topics/340144509
<!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 runat="server">
    <title>Auto Complete</title>
      <style type="text/css">
    
        .hlight{background-color:Red}
        .normal{backgroud-color:transparent;}
    
    </style>
    <script language="javascript" type="text/javascript" src="../../JS/jquery-1[1].3.2.min.js"></script>
    <script>
    function doit(evt)
    {
        evt = (evt) ? evt : ((window.event) ? window.event : "");
        var key = evt.keyCode?evt.keyCode:evt.which;
        if(key==38|key==40|key==13)return;
        var wd = document.getElementById("wd").value;
        if(wd.length==0)return;
        $.ajax({
            url:'../../Example/AutoComplete/Handler1.ashx',
            type:'POST',
            dataType:'json',
            data: "wd="+wd, 
            error:function(x){alert(x.status);},
            success:function(data){$("#show_wd").html(setTable(data)).show();}
        });
    }
    
    //设置拼接Table
    function setTable(jsn)
    {
        if(jsn.s.length==0|jsn.s[0]==""|jsn.s[0]=="undefined")
        {
            document.getElementById("show_wd").style.display="none";
            return"";
        }
        
        var html ="<table id=\"tb\" width=\"100%\">";
        for(var i in jsn.s)
        {
        html+="<tr onmouseover=\"hLight(this)\"><td onclick=\"completeField(this)\">"+jsn.s[i]+"</td></tr>";
        }
        html +="<tr class=\"hlight\" style=\"display:none\"><td>"+document.getElementById('wd').value+"</td></tr>";
        //alert(document.getElementById('wd').value);
        html +="</table>";
        //setDiv();//设置DIV
        //alert(html);
        return html;
    }
    //设置DIV的位置
    function setDiv()
    {
       var txt = document.getElementById("wd");
       var tDiv = document.getElementById("show_wd");
       tDiv.style.width =txt.offsetWidth; + "px";
       var left = calculateOffset(txt,"offsetLeft");
       var top = calculateOffset(txt, "offsetTop") + txt.offsetHeight;
       tDiv.style.border = "black 1px solid";
       tDiv.style.left = left + "px";
       tDiv.style.top = top + "px";
    }
    
    //将该行的数据填充到文本框内
    function completeField(tdvalue)
    {
        document.getElementById("wd").value=tdvalue.innerText; 
        document.getElementById("show_wd").style.display="none";
    }

    //计算控件相对于浏览器的位置
    function calculateOffset(field, attr)
    {
          var offset = 0;
          while(field) {
            offset += field[attr]; 

            field = field.offsetParent;
          }
         return offset;
    }

    //在输入框内点击上下回车
    function KeyDown(evt)
    {
        evt = (evt) ? evt : ((window.event) ? window.event : "") //兼容IE和Firefox获得keyBoardEvent对象
        var key = evt.keyCode?evt.keyCode:evt.which; //兼容IE和Firefox获得keyBoardEvent对象的键值
        if(key==38)
        {
            //上
            lightMove("up");
        }
        if(key==40)
        {
            //下
            lightMove("down");            
        }
        if(key==13)
        {
            //回车
            lightMove("ok");            
        }
    }
    
    //高亮移动
    function lightMove(cmd)
    {
        var tb = document.getElementById("tb");
       
        if(cmd=="up")
        {
            //上
            for(var i=0;i<tb.rows.length;i++)
            {
               if(tb.rows[i].className=="hlight")
                {
                    tb.rows[i].className="normal";
                    i=i==0?tb.rows.length-1:i-1;
                    tb.rows[i].className="hlight";
                    sTxt(tb.childNodes[i].childNodes[0]);
                }  
            }
        }
        if(cmd=="down")
        {
            for(var i=0;i<tb.rows.length;i++)
            {
               if(tb.rows[i].className=="hlight")
                {
                    tb.rows[i].className="normal";
                    i=i==tb.rows.length-1?0:i+1;
                    tb.rows[i].className="hlight";
                    sTxt(tb.childNodes[i].childNodes[0]);
                }  
            }
        }
        if(cmd=="ok")
        {
            for(var i=0;i<tb.rows.length;i++)
            {
               if(tb.rows[i].className=="hlight")
                {
                   completeField(tb.rows[i]);
                }  
            }
        }
    }
    //将输入的内容写进Table
    function insTR(tb)
    {
        var new_tr = tb.insertRow(tb.rows.length);
        var new_td = new_tr.insertCell();
        new_td.innerText=document.getElementById("wd").value;
        new_tr.style.display="none";
        new_tr.className="hlight";
    }
    //将数值写入文本框
    function sTxt(td)
    {
    //alert(td.innerText);
        document.getElementById("wd").value=td.innerText;
    }
    //高亮某行
    function hLight(tr)
    {
        var tb = document.getElementById("tb");
        for(var i=0;i<tb.rows.length;i++)
        {
           if(tb.rows[i].className=="hlight")
            {
                tb.rows[i].className="normal";
                break;
            }  
        }
        tr.className="hlight";
    }

    window.onload = function()
    {
        setDiv();
    }
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input id="wd" type="text" style="width: 500px" autocomplete="off" onkeypress="doit(event)"
                onkeydown="KeyDown(event)" />
            <div id="show_wd" style="position: absolute; font-size: 12px; display:none">
            </div>
    </div>
    </form>
</body>
</html>