模拟百度搜索框提示功能实例

最新推荐文章于 2022-03-21 21:49:05 发布

Merlin-蔡

最新推荐文章于 2022-03-21 21:49:05 发布

阅读量756

点赞数 1

本文链接：https://blog.csdn.net/Merlin2017/article/details/72935316

版权

<!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;
            position: relative;
        }
        #txt {
            width: 498px;
            height: 38px;
            border: 1px solid #eee;
            font-size: 20px;
        }
        #search {
            width: 100px;
            height: 42px;
        }
        #keywords {
            position: absolute;
            top: 40px;
            left: 0;
            background-color: rgb(12, 255, 24);
            list-style: none;
            width: 500px;
        }
        li {
            line-height: 24px;
            height:24px;
            width:498px;
        }
        li:hover{
            background: yellow;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top">
        <input type="text" id="txt"/><input type="button" value="search" id="search"/>
    </div>
    <ul id="keywords"></ul>
</div>
<script>
    var keywords = ["高考资源网","高考将取消三本","高考零分作文","高考满分作文","高考分数线","高考学习网",
        "夏天","夏天的太阳","夏日温度","夏日天气","夏天避暑方法","夏天的风","夏天吃什么减肥"];

    var text=document.getElementById("txt");
    var ul=document.getElementById("keywords");
    document.getElementById("txt").onkeyup=function(){
        //每次追加之前先清空
        ul.innerHTML="";
        var currentText=this.value;
        if(currentText.length==0){
            return ;
        }
//        清空搜索框里面的内容
        var tempArr=[];
        for(var i=0;i<keywords.length;i++){
//           将输入的内容与数据词条进行对比
            if(keywords[i].indexOf(currentText)>=0){
                tempArr.push(keywords[i])
            }
        }

//       对比后将结果循环遍历追加到ul下面
        for(var j=0;j<tempArr.length;j++){
            var li=document.createElement("li");
            li.innerHTML=tempArr[j];  //往li里面添加内容
            ul.appendChild(li);
            li.onclick=function(){
                text.value=this.innerHTML;
                ul.innerHTML = "";
            }
        }
    }
</script>
</body>
</html>