JS_模拟百度搜索框

最新推荐文章于 2024-04-04 01:10:23 发布

魂断楼兰

最新推荐文章于 2024-04-04 01:10:23 发布

阅读量478

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/ziwutong88/article/details/53402937

版权

JS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

模拟百度索搜框

<!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>
    <!--<ul>-->
    <!--<li>aaaa</li>-->
    <!--<li>bbb</li>-->
    <!--<li>ccc</li>-->
    <!--</ul>-->
</div>
</body>
</html>

<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>

魂断楼兰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS_模拟百度搜索框

模拟百度索搜框<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box {
复制链接

扫一扫