案例:模拟百度搜索框自动加载内容

实现效果如下在这里插入图片描述
我们重点分析js代码,所以html和css不做过多解释(想了解的直接看结尾的源代码)
js需求分析:
需求一:搜索框txt键盘弹起:获取文本,根据搜索文本显示对象的ul内容列表;
需求二:内容列表鼠标移入,颜色改为灰色;
需求三:内容列表鼠标移出,颜色恢复原来的颜色;
需求四:需求内容列表鼠标单击:1.搜索框文本变成单击的元素文本;2.内容列表自动清空.

需求一完整的步骤:

(需求一即搜索框txt键盘弹起:获取文本,根据搜索文本显示对象的ul内容列表)
1.键盘弹起事件
2.获取当前文本(存入变量search)
3.遍历数组
4.将数组里的每个一个元素存进变量s
5.s里判断是否含有当前文本search(用indexOf,会返回首次出现的下标)
在判断里,如果有的话执行创建li元素,设置li元素文本为数组的元素,并添加到页面.
需求一实现代码:

    // 先准备一个数组,一般后台会给你准备好
    var keywords = ["广东人", "老广", "广西", "广州", "1254", "456", "广东人爱吃", "广西人", "王宝强", "王宝强的经纪人", "王宝强的老婆", "林丹出轨门", "林丹夺冠",
        "123", "1234", "2341", "林丹的生平", "JavaScript", "Java", "王思聪", "王健林", "社会王", "隔壁老王"
    ];
    //先获取元素:
    var txt = document.getElementById('txt');
    var ul = document.getElementById('keywords');
    
    //需求一:搜索框txt键盘弹起:获取文本,根据搜索文本显示对象的ul内容列表;
    //1.键盘弹起事件
    txt.onkeyup = function () {
        //2.获取当前文本(存入变量search)
        var search = this.value;
        //3.遍历数组
        for (var i = 0; i < keywords.length; i++) {
            //4.将数组里的每个一个元素存进变量s
            var s = keywords[i];
            // console.log(s);

            //5.s里判断是否含有当前文本search(用indexOf,会返回首次出现的下标)
                if(s.indexOf(search)!=-1){
                //在判断里,如果有的话执行创建li元素,设置li元素文本为数组的元素,并添加到页面
                var li=document.createElement('li');
                li.innerHTML=s;
                ul.appendChild(li);               
                }           
        }
    }

需求二:内容列表鼠标移入,颜色改为灰色;

                li.onmouseover=function(){
                    // alert(11)
                    //先存一下旧颜色
                    this.oldColor=this.style.backgroundColor;
                    this.style.backgroundColor='rgb(240, 240, 240)';
                }

需求三:内容列表鼠标移出,颜色恢复原来的颜色;

 li.onmouseout=function(){
                    this.style.backgroundColor=this.oldColor;
                }

需求四:内容列表鼠标单击:1.搜索框文本变成单击的元素文本;2.内容列表自动清空(内容为空的话是空字符串哦,不是none).

li.onclick=function(){
                //    console.log(this.value);
                    txt.value=this.innerText;
                    ul.innerHTML="";
                }

附件:完整代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 20px;
        }

        .box {
            width: 600px;
            height: 40px;
            margin: 200px auto;
            /* border:1px solid black; */
            position: relative;
        }

        #txt {
            width: 498px;
            height: 38px;
            border: 1px solid #ccc;
            font-size: 20px;
            float: left;
            outline: none;
            /* outline去除高亮 */
        }

        #search {
            width: 100px;
            height: 40px;
            float: left;
        }

        #keywords {
            position: absolute;
            top: 40px;
            left: 0;
            background-color: white;
            list-style: none;
            width: 500px;
            ;
        }

        li {
            line-height: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <input type="text" id="txt" />
            <input type="button" value="百度" id="search" />
        </div>
        <ul id="keywords"></ul>
    </div>
</body>

</html>
<!-- 
需求分析:
一.搜索框txt键盘弹起:获取文本,根据搜索文本显示对象的ul内容列表;
二.内容列表鼠标移入,颜色改为灰色;
三.内容列表鼠标移出,颜色恢复原来的颜色;
四.内容列表鼠标单击:1.搜索框文本变成单击的元素文本;2.内容列表自动清空.



 -->

<script>
    // 先准备一个数组,一般后台会给你准备好
    var keywords = ["广东人", "老广", "广西", "广州", "1254", "456", "广东人爱吃", "广西人", "王宝强", "王宝强的经纪人", "王宝强的老婆", "林丹出轨门", "林丹夺冠",
        "123", "1234", "2341", "林丹的生平", "JavaScript", "Java", "王思聪", "王健林", "社会王", "隔壁老王"
    ];
    //先获取元素:
    var txt = document.getElementById('txt');
    var ul = document.getElementById('keywords');



    //需求一:搜索框txt键盘弹起:获取文本,根据搜索文本显示对象的ul内容列表;
    //1.键盘弹起事件
    txt.onkeyup = function () {
    //清空上一次内容
    ul.innerHTML="";
    //如果输入内容是空,则也清空一下,并阻止执行
    if(txt.value==""){
        ul.innerHTML="";
        return false;  
    }


        //2.获取当前文本(存入变量search)
        var search = this.value;
        //3.遍历数组
        for (var i = 0; i < keywords.length; i++) {
            //4.将数组里的每个一个元素存进变量s
            var s = keywords[i];
            // console.log(s);

            //5.s里判断是否含有当前文本search(用indexOf,会返回首次出现的下标)
                if(s.indexOf(search)!=-1){
                //在判断里,如果有的话执行创建li元素,设置li元素文本为数组的元素,并添加到页面
                var li=document.createElement('li');
                li.innerHTML=s;
                ul.appendChild(li);   

                //需求二.内容列表鼠标移入,颜色改为灰色;
                li.onmouseover=function(){
                    // alert(11)
                    //先存一下旧颜色
                    this.oldColor=this.style.backgroundColor;
                    this.style.backgroundColor='rgb(240, 240, 240)';
                }
                //需求三.内容列表鼠标移出,颜色恢复原来的颜色;
                li.onmouseout=function(){
                    this.style.backgroundColor=this.oldColor;
                }
                // 需求四.内容列表鼠标单击:1.搜索框文本变成单击的元素文本;2.内容列表自动清空.
                li.onclick=function(){
                //    console.log(this.value);
                    txt.value=this.innerText;
                    ul.innerHTML="";
                }

                }           
        }
    }
</script>

案例:模拟百度搜索框自动加载内容

需求一完整的步骤:

需求二:内容列表鼠标移入,颜色改为灰色;

需求三:内容列表鼠标移出,颜色恢复原来的颜色;

需求四:内容列表鼠标单击:1.搜索框文本变成单击的元素文本;2.内容列表自动清空(内容为空的话是空字符串哦,不是none).

猜你喜欢