JS案例16-模拟搜索引擎候选框

2018-10-23  本文已影响0人  hi__world

少废话,直接上图。


模拟搜索引擎

源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            margin: 200px auto;
        }
        ul {
            width: 392px;
            padding: 5px;
            list-style: none;
            border: 1px solid red;
        }
        li:hover {
            background-color: red;
        }
        input {
            width: 400px;
        }
        button {
            width: 70px;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text"/>
        <button>搜索</button>

    </div>

    <script>
        //需求:输入内容(输入事件,键盘弹起事件),模拟服务器获取内容,创建ul,并在其中显示。
        //步骤:
        //1.获取事件源  //2.绑定事件  //3.书写事件驱动程序
        
        //1.获取事件源
        //模拟服务器获取内容
        var arr = ["a","ab","abc","abcd","aa","aaa"];
        var box = document.getElementsByTagName("div")[0];
        var inp = box.children[0];
//        var inp = document.getElementsByTagName("input")[0];

        //2.绑定事件(输入内容(输入事件,键盘弹起事件))
        inp.onkeyup = function () {
            //创建一个字符串,里面添加满了li和对应的内容。
            var newArr = [];
            //我要从数组中查询以input中输入内容为开头的信息,然后添加到li中,转换成字符串。
            //遍历老数组,然后判断每一项,哪项是以input内容为开头的穿件一个li,塞进去。
            for(var i=0;i<arr.length;i++){
                //判断当前项,是否已input内容为开头
                //获取输入内容input标签的value属性值。
                var val = this.value;
                if(arr[i].indexOf(val)===0){
                    newArr.push("<li>"+arr[i]+"</li>");
                }
            }
            var str = newArr.join("");

            //Bug1.每次创建新的ul之前,先删除旧的ul
            //只有ul存在我们才能删除ul
//            var aaa = box.getElementsByTagName("ul")[0];
            if(box.children[2]){
                 //只要存在,那么就是object,object类型的数据,只要不是null,对应的boolean值都是true;
                box.removeChild(box.children[2]);
            }

            //Bug2.如果input中内容为空,那么久不能在生成ul了。
            //如果input为空,那么切断函数

            //Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
            //newArr的长度为0,就能证明以input内容为开头的元素,在arr中不存在
            if(this.value.length === 0 || newArr.length === 0){
                //切断函数(不在产生新的ul)
                return;
            }

            //3.书写事件驱动程序
            var ul = document.createElement("ul");
            //把创建好的内容添加到ul中。
            ul.innerHTML = str;
            box.appendChild(ul);
        }
    </script>
</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读