Please enable Javascript to view the contents

Javascript-search搜尋功能

 ·   ·  ☕ 1 分鐘  ·  ✍️ JK

搜尋當頁的資料

源碼網址:http://www.redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html

搜尋

加入資料後,在data-index屬性上加入要搜尋的資料

<input type="text" placeholder="search" id="search" /> 
  • First Name
      <dd>
        Ona
      </dd>
      
      <dt>
        Last Name
      </dt>
      
      <dd>
        Bednar
      </dd>
      
      <dt>
        Email
      </dt>
      
      <dd>
        [email protected]
      </dd>
      
      <dt>
        Phone
      </dt>
      
      <dd>
        1-265-479-1196&#215;714
      </dd>
    </dl>
    
  • First Name
      <dd>
        愛耍廢
      </dd>
      
      <dt>
        Last Name
      </dt>
      
      <dd>
        愛耍廢
      </dd>
      
      <dt>
        Email
      </dt>
      
      <dd>
        [email protected]
      </dd>
      
      <dt>
        Phone
      </dt>
      
      <dd>
        (121)644-5577
      </dd>
    </dl>
    

推薦:相關教學

使用 CSS:not 與 data-index 即時搜尋頁面

分享

JK
作者
JK
學習筆記