原生JS模拟百度搜索框

1 <!-- 页面就只是一个简单文本框和按钮，在文本框底部用一个ul列表来展示相关内容 -->2 <div class="box">3 ????<div class="top">4 ????????<input type="text" id="txt"/><input type="button" value="百度一下" id="search"/>5 ????</div>6 ????<ul id="keywords"></ul>7 </div>

 1 <style> 2 ????????* { 3 ????????????margin: 0; 4 ????????????padding: 0; 5 ????????} 6 ????????body { 7 ????????????font-size: 20px; 8 ????????} 9 ????????.box {10 ????????????width: 600px;11 ????????????height: 40px;12 ????????????margin: 200px auto; ?/*大盒子页面居中 */13 ????????????position: relative;14 ????????}15 ????????.top{16 ????????????width: 605px;17 ????????????height: 40px;18 ????????}19 ????????#txt {20 ????????????width: 490px;21 ????????????height: 38px;22 ????????????border: 1px solid #CCCCCC;23 ????????????font-size: 18px;24 ????????????float: left;25 ????????????padding-left: 8px;26 ????????????outline: none; ?/* 去除文本框获取焦点时的默认样式 */27 ????????}28 ????????#txt:focus{29 ????????????border: 1px solid #3385FF; ???????????30 ????????}31 ????????#search {32 ????????????width: 100px;33 ????????????height: 40px;34 ????????????float: left;35 ????????????background-color: #3385FF;36 ????????????color: white;37 ????????????border: none;38 ????????????font-size: 16px;39 ????????}40 ????????#keywords {41 ????????????position: absolute; ?/* ul相对父盒子定位 */42 ????????????top: 40px;43 ????????????left: 0;44 ????????????border: 1px solid #CCCCCC;45 ????????????border-top: none;46 ????????????list-style: none; ?/* 去除无序列表默认自带的小圆点 */47 ????????????width: 498px;48 ????????????display: none; ?/* 把ul隐藏起来，在获得相关内容时再显示出来，这样在搜索之前，页面只有一个搜索框和按钮 */49 ????????}50 ????????li {51 ????????????line-height: 24px;52 ????????????font-size: 16px;53 ????????????padding-left: 8px;54 ????????}55 ????</style>

 1 <script> ?2 ????// 定义一个存储相关内容的数组，模拟后台获取的数据，数组每个元素都是一个字符串 3 ????var keywords = ["周杰伦", "周杰伦新专辑", "周杰伦等你下课", "陈奕迅", "陈奕迅演唱会", "陈奕迅歌手", 4 ????????"陈奕迅王菲","前端","前端开发","前端入门到放弃","前端要学什么","周润发","周润发赌神","周润发澳门风云","周末双休是国家规定吗","super junior", 5 ????????"JavaScript","Java","super junior成员","super junior成员强仁","super junior成员金英云","A short journey"]; 6 ?7 ????// 获取文本框，按钮和列表 8 ????var txt=document.getElementById("txt"); 9 ????var search=document.getElementById("search");10 ????var kw=document.getElementById("keywords");11 12 ????// 给文本框注册一个键盘弹起事件，每按下一个按键弹起后，函数执行一遍13 ????txt.onkeyup= function () {14 ????????kw.innerHTML=""; ?//每一次匹配数据前，先把列表清空，如果不清空会导致每一次获取的内容都叠加显示在列表上15 16 ????????if(this.value){ //文本框里有输入内容时才进行数据匹配和显示17 ????????????for(var i=0;i<keywords.length;i++){ ?//遍历数组里的所有内容18 ????????????????if(keywords[i].indexOf(this.value)!=-1){ ?//如果文本框输入的字符或字符串能匹配到数组元素的字符串，就创建一个li标签，把数组的这个元素当成li标签的内容展示出来19 ????????????????????var li=document.createElement("li"); 20 ????????????????????li.innerHTML=keywords[i];21 ????????????????????kw.style.display="block";22 ????????????????????kw.appendChild(li); 23 ????????????????????24 ????????????????????//给新创建的每一个li标签注册一个鼠标移入和移出事件25 ????????????????????li.onmouseover= function () {26 ????????????????????????this.defaultColor=this.style.backgroundColor; //定义一个defaultColor属性来存储li标签本来的背景颜色27 ????????????????????????this.style.backgroundColor="#F1F1F1";28 ????????????????????};29 30 ????????????????????li.onmouseout= function () {31 ????????????????????????this.style.backgroundColor=this.defaultColor;32 ????????????????????};33 ????????????????????// 给新创建的每一个li标签注册一个点击事件34 ????????????????????li.onclick= function () {35 ????????????????????????txt.value=this.innerHTML; //将点击的列表内容显示到文本框 ???????????????????36 ????????????????????};37 ????????????????}38 ????????????}39 ????????}40 ????};41 ???// 给整个HTML注册一个点击事件，清空列表并将列表隐藏42 ????document.documentElement.onclick= function () {43 ????????kw.innerHTML="";44 ????????kw.style.display="none"; ???????????????????????????????45 ????}46 </script>