可搜索列表代码存放在Github效果预览初衷：很多人初学前端都会问，“前端如何入门？”，我对目前网上的“入门级”教材不是很满意。在学习一门新知识时，例子尤为重要。这里我整理一下当前页面常用功能实现的具体例子。希望能为您提供一些帮助。希望与大家分享，共同进步。HTML部分A阿黛尔艾格尼丝B比利鲍勃C卡尔文克里斯蒂娜辛迪CSS部分#myInput{background-image:url('http://www.freeiconspng.com/uploads/search-icon-png-2.png');/*带有放大镜图标的背景*/background-size:18px;/*大小与内容框大小一致*/background-position:10px12px;/*背景图片定位*/background-repeat:no-repeat;/*图像不重复*/width:100%;字体大小：16px；填充：12px20px12px40px；边框：1px实心#ddd；底部边距：12px；}#myUL{/*清除默认样式*/list-style:none;填充：0；margin:0;}#myULlia{border:1pxsolid#ddd;边距顶部：-1px；/*消除双边框*/background-color:#f6f6f6;填充：12px；文字修饰：无；字体大小：18px；颜色：黑色;显示：块；#myULlia.header{背景颜色：#e2e2e2;游标：默认；/*使光标看起来像a.header不可点击*/}#myULlia:hover:not(.header){background-color:#eee;}JavaScriptpart(function(){/*搜索函数*/functionmySearch(){varinputBox=document.getElementById('myInput'),input=inputBox.value.toUpperCase(),/*搜索输入大写*/ul=document.getElementById("myUL"),li=ul.getElementsByTagName('li');for(i=0;iin*/if(a.innerHTML.toUpperCase().indexOf(input)>-1){/*搜索中是否有“searchContent”*/li[i].style.display="方块";}else{li[i].style.display="none";}}}varinputBox=文档。getElementById('我的输入');/*每次按下和抬起键盘键时调用该函数*/inputBox.onkeyup=function(){mySearch();}})();好了，现在所有的代码都搞定了！赶紧打开浏览器看看效果吧！在这里，只是给大家提供一个思路，具体实现可以参考一下，每个人可以有不同的方法。请快快发挥你的想象力，把你最想在电脑上实现的功能打出来吧！来自w3cschools的参考
