用CSS3實現用戶端的全文檢索索引

使用

檢索列表

<!-- Data generated by Faker, see https://github.com/fzaninotto/Faker --><ul class="contacts">  <!-- Add text to the data-index attribute to enable full-text search -->  <!-- Don't forget to lowercase it to make search case-insensitive -->  <li class="searchable" data-index="onabednarschamberger.frank@wuckert.com1-265-479-1196x714">    <dl>      <dt>First Name</dt><dd>Ona</dd>      <dt>Last Name</dt><dd>Bednar</dd>      <dt>Email</dt><dd>schamberger.frank@wuckert.com</dd>      <dt>Phone</dt><dd>1-265-479-1196x714</dd>    </dl>  </li>  <li class="searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577">    <dl>      <dt>First Name</dt><dd>Newton</dd>      <dt>Last Name</dt><dd>Cronin</dd>      <dt>Email</dt><dd>torphy.dorothea@gmail.com</dd>      <dt>Phone</dt><dd>(121)644-5577</dd>    </dl>  </li>  <!-- add as much data as you want --></ul>

搜尋代碼

搜尋功能的實現非常簡單，它依賴於兩個

<input type="text" placeholder="search" id="search"><style id="search_style"></style><script type="text/javascript">var searchStyle = document.getElementById('search_style');document.getElementById('search').addEventListener('input', function() {  if (!this.value) {    searchStyle.innerHTML = "";    return;  }  // look ma, no indexOf!  searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";  // beware of css injections!});</script>

使用