搜索框 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        body{
            width: 100%;
            height: 100%;
            background-color: #e1e1e1;
        }
            #show {
                width: 175px;
                height: 200px;
                background-color: white;
                display: none;
            }
        </style>
        <script type="text/javascript">
            /*
                需求当键盘按下输入值时候，如果匹配到数据库有相同的关键字时
                    则在输入框下面展示出来，
                焦点事件移除，ipt的内容清空
            */
            window.onload = function() {
                //模拟数据
                let arr = ["HTML价格不要钱19", "CSS价格29", "JavaScript价格39", "我只是关键字49", "滥竽充数"];
                //获取待会要用的元素
                let ipt = document.getElementsByTagName("input")[0];
                let btn = document.getElementsByTagName("button")[0];
                let show = document.getElementById("show");
                let time;
                //键盘按下显示
                ipt.onkeydown = function() {
                        
                        var str = "";
                        show.style.display = "block";
                        //如果输入的值等于arr其中的一个字符串，就会显示
                        console.log(toLocaleLowerCase(arr));
                        arr.forEach((item)=>{
                            var res = item.indexOf(ipt.value);
                            if(res !=-1){
                                str += "<p>"+item+"</p>";
                            }
                            if(!str || !ipt.value){
                                show.innerHTML = "<p>没有啊老铁</p>"
                            }else{
                                show.innerHTML = str;
                            }
                            
                        })
                }
                //光标消失隐藏并且清空
                ipt.onblur = function() {
                    show.style.display = "none";
                    ipt.value = "";
                }
            }
        </script>
    </head>
    <body>
        <input type="text">
        <button type="button">提交</button>
        <div id="show"></div>
    </body>
</html>

 

posted @ 2022-03-22 15:52  st-159  阅读(267)  评论(0)    收藏  举报