標籤：for pad 面試 lan search erb one 方法 har
無意中找到一種利用css就可實現的搜尋過濾的方法，不得不說看了代碼之後確實被驚豔到了，虧我之前面試還因為做這個功能做太慢而拖了後腿。在此記錄下代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> [type=search]{ width: 160px; padding: 5px; } label{ display: block; width: 170px; background-color: #fff; box-shadow: 1px 0 #ccc,0 1px #ccc,-1px 0 #ccc,0 -1px #ccc; visibility: hidden; } [type=search]:focus + label{ visibility: visible; } </style></head><body> <input type="search" name=""> <label for="city"> <div class="list" data-ciry="廣州guangzhou">廣州市</div> <div class="list" data-ciry="哈爾濱haerbin">哈爾濱市</div> <div class="list" data-ciry="深圳shenzhen">深圳市</div> <div class="list" data-ciry="長春changchun">長春市</div> <div class="list" data-ciry="成都chengdu">成都市</div> <div class="list" data-ciry="北京beijing">北京市</div> <div class="list" data-ciry="上海shanghai">上海市</div> <div class="list" data-ciry="台北taibei">台北市</div> </label> <script type="text/javascript"> var s = document.createElement(‘style‘), input = document.querySelector(‘input‘); document.head.appendChild(s); input.addEventListener(‘input‘,function(){ if(this.value !== ‘‘){ s.innerHTML = ‘.list:not([data-ciry*=‘ + this.value + ‘]){display:none}‘; } else{ s.innerHTML = ‘‘; } }) </script></body></html>
首先思路就是利用Input的focus偽類來實現下拉的隱藏顯示，其次就是一個input事件給不匹配的城市給隱藏掉。
具體可參考這裡。
利用css實現搜尋過濾
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
