js搜索文本框

其他 2018-09-12 04:18:47 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34343637/article/details/82314117

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>搜索文本框</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    #dv1 {
        width: 500px;
        margin: 300px auto;
    }

    #dv2 {
        height: 42px;
        line-height: 42px;
        width: 100%;
        position: relative;

    }

    #dv2 #searchText {
        width: 448px;
        height: 40px;
        font-size: 18px;
        float: left;
        outline: none;
        border: 1px solid green;
        border-right: 0;
    }

    #btn {
        width: 51px;
        height: 100%;
        font-size: 18px;
        float: left;
        background: rgb(29, 150, 255);
        color: #fff;
        cursor: pointer;
        }

    #dv3{
        background-color: #green;
        border: 1px solid #ccc;
        position: absolute;
        
        width:447px;
        top:0;
        border-top: 0;
        margin-top:40px;
        display: none;
    }
    #dv3 p{
        margin: 0;
        padding: 0;
        height: 30px;
        line-height: 30px;

    }
    </style>
</head>

<body>
    <div id="dv1">
        <div id="dv2">
            <input type="text" name="" id="searchText">
            <input type="submit" name="" id="btn" value="搜索">
            <div id="dv3"></div>
        </div>
    </div>
    <script type="text/javascript">
    var search = ["白日依山尽", "黄河入海流", "欲穷千里目", "更上一成楼", "白白晶晶", "黄黄之水晃晃", "欲网支撑", "更上最新更", "填满地被", "黄沙万里", "天南地北", "我要从南走到北", "还要还要从夜走到黑", "谭维维摆地摊"];

    var text = document.getElementById("searchText");
    text.onkeyup= function() {
         var temshow = document.getElementById("dv3");
        var tempArr = [];

        console.log("顶层的this：" + this);
        //清除上一次的显示列表
        for (var i = 0; i < temshow.childNodes.length; i++) {
                        temshow.removeChild(temshow.childNodes[i]);
                    }

        //遍历数组进行，判断输入框的value值，在所在的arr中元素的位置。假如是第一个则将元素填入
        ////不可以在使用indexOf方法，不可以使用this传值。this 代表的是windows 对象
        search.forEach(function(item) {

            if (item.indexOf(text.value) == 0) {
               
              

                // for (var i = 0; i < temshow.childNodes.length; i++) {
                //         temshow.removeChild(temshow.childNodes[i]);
                //     }
                var getValue = text.value;
               var pObj =  document.createElement("p");
                  
                //判断对话框输入的值，假如为空直接返回。假设不返回，对话框输入空内容适合所有将匹配所有的内容
                if (text.value == "") {
                    
                    // ary.splice(0,ary.length); 
                    temshow.style.display = "none";
                    
                    for (var i = 0; i < temshow.childNodes.length; i++) {
                        temshow.removeChild(temshow.childNodes[i]);
                    }
                    // temshow.childNodes.
                    
                    return;

                }

                 else {
                    tempArr.push(item);
                    console.log(item);


                    
                    temshow.style.display = "block";
                    
                    pObj.innerText =item;
              
                    temshow.appendChild(pObj);
                    
                   

                    //注册鼠标经过与鼠标离开事件
                    pObj.onmouseover=mouseOver;
                    pObj.onmouseout=mouseOut;
                }
            }
        });
         
                     
        
    }

    function mouseOver(){
        this.style.backgroundColor = "#ccc";

    }

    function mouseOut(){
        this.style.backgroundColor = "";
    }

    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_34343637/article/details/82314117
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022