由于业务需求，要实现 一个下拉框搜索功能。这个下拉功能和百度的还是有点区别的，百度的是时时与服务器交互的，而这个只是模拟。技术点在于实现 了搜索功能。
未搜索前如下图：
搜索后：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; margin: 100px auto; } .select-box{ width: 100%; overflow: hidden; } .select-dry{ border: 1px solid #dddddd; height: 30px; line-height: 30px; color: #000; padding-left: 10px; background: white; } .select-dry input{ border:0; outline:none; } .select-box .item{ box-sizing:border-box; border: 1px solid #dddddd; width:100%; height: auto; color: #000; padding-left: 10px; background: white; } .select-box .item p{ padding-right: 10px; } </style> </head> <body> <div class="box"> <div class="select-box" id="select-box"> <div class="select-dry"> <input type="text" id="ipt"> </div> <div class="item-box" id="item-box"> </div> <!--<div class="item"><p> MarkDown重写了这篇博客,欢迎移步到:Linux修</p></div> <div class="item">123123</div> <div class="item">123123</div> --> <script> var datas = ['人','123','666','你好4','965','6','12','23','34','45','56','666']; var itemBox = document.getElementById("item-box"); createList(datas); document.getElementById("ipt").addEventListener('input',function(e) { // console.log('e.target.value',e.target.value) var val = e.target.value; var arr = []; for(var i = 0;i<datas.length;i++){ if(datas[i].toString().indexOf(val.toString())!=-1){ console.log(datas[i]) arr.push(datas[i]) } } itemBox.innerHTML = ''; createList(arr); }); function createList(datas){ for(var i = 0;i<datas.length;i++){ var newDom = document.createElement("div"); newDom.className = "item"; newDom.innerHTML = datas[i]; itemBox.appendChild(newDom); } } </script> </div> </div> </body> </html>
Sublime Text3自动保存的功能(失去焦点自动保存)
这是最新版本的Sublime Text3的设置方法 (三部曲);
第一步:preferences 下面的settings；(和老版本的不一样了吧,之前有什么default 和 users,这里只有settings)
第二步:现在分两边了,左边是只读的不能编辑,在左边ctrl + f ,然后在下面输入框里输入save_on_focus_lost,或者找185行
第三部:看下图就搞定了,复制这段代码到右边的框里,然后把false ,改成true 把true后面的逗号删掉,上面的一段代码结束加英文状态下的逗号就好,今后就不用ctrl+s了,舒心多了!
