练习案例_模拟百度搜索框 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <style type="text/css">
        #tipDiv {
            border: solid 1px lightgray;
            background-color: white;
        }

        #tipDiv p{
            margin:0 ;
        }
    </style>
    <script type="text/javascript">


        //1 输入框输入内容时，显示提示div

        var searchInput;
        var tipDiv;
        var selectedIndex = -1;
        var oldValue;//记录用户输入的原始的值

        window.onload=function(){

            searchInput = document.getElementById("searchInput");
            tipDiv = document.getElementById("tipDiv");

            searchInput.onkeyup=function(){


                if(event.keyCode==40 || event.keyCode==38){

                    if(event.keyCode==40){
                        selectedIndex++;
                    }else{
                        selectedIndex--;
                    }


                    if(selectedIndex>=datas.length){
                        selectedIndex=-1;
                    }
                    if(selectedIndex<-1){
                        selectedIndex=datas.length-1;
                    }


                    //选中selectedIndex所指的的那个条目
                    selectItem(selectedIndex);

                }else{
                    //记录下用户输入的值
                    oldValue = this.value;

                    //显示提示层
                    showItems();
                }



            }
            searchInput.onblur=function(){
                tipDiv.style.display="none";
            }

        }


        //选中条目并且更新输入框
        function selectItem(index){

            var items = tipDiv.getElementsByTagName("p");

            for(var i=0;i<items.length;i++){
                items.item(i).style.backgroundColor=null;
            }

            if(index>-1){
                items.item(index).style.backgroundColor="lightgray";
                searchInput.value = items.item(index).innerHTML;
            }else{
                searchInput.value = oldValue;
            }


        }

        //认为datas是从服务器拿到的数据
        var datas = ["javascript","javascript教程","javascript视频","javascript正则表达式",];

        function showItems(){
            tipDiv.style.display="block";

            //每次重新添加之前都清空原来的内容
            tipDiv.innerHTML = "";

            var width = searchInput.offsetWidth;
            tipDiv.style.width=width+"px";

            for(var i=0;i<datas.length;i++){
                var item = datas[i];

                var p = document.createElement("p");
                p.innerHTML = item;

                tipDiv.appendChild(p);
            }
        }
    </script>
</head>
<body>
    <div>
        <input id="searchInput" type="text" />
        <input type="submit" value="搜索一下" style="margin-left: 10px">
    </div>
    <div id="tipDiv" style="display: none"></div>
</body>
</html>

　　

 

posted @ 2016-07-07 22:38  linyongqin  阅读(150)  评论(0)    收藏  举报