<!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>
模拟百度搜索框提示功能实例
最新推荐文章于 2019-07-19 10:45:08 发布