Redo The Web

Client-side full-text search in CSS

Using data- attributes for indexation, and a dynamic stylesheet with a CSS3 selector for search, it is straightforward to implement a client-side full-text search in CSS rather than JavaScript. Here is an example.

The Searchable List

The Search Code

The search is very straightforward: it relies on two well-supported CSS3 selectors (:not() and [attr*=]) and the rewriting of a style rule each time the search input is modified:

The advantage of using CSS selectors rather than JavaScript indexOf() for search is speed: you only change one element at each keystroke (the <style> tag) instead of changing all the elements matching the query. Using the :not() selector, this implementation works on IE9+, but it could easily be made compatible with IE8+ by using two rules instead of one.

Demo

  • First Name
    Ona
    Last Name
    Bednar
    Email
    schamberger.frank@wuckert.com
    Phone
    1-265-479-1196x714
  • First Name
    Newton
    Last Name
    Cronin
    Email
    torphy.dorothea@gmail.com
    Phone
    (121)644-5577
  • First Name
    Adrianna
    Last Name
    Rath
    Email
    reymundo.hansen@hotmail.com
    Phone
    119-040-0800x47661
  • First Name
    Damien
    Last Name
    Howe
    Email
    hester30@kuhlman.org
    Phone
    +97(7)8318939455
  • First Name
    Alayna
    Last Name
    Bergnaum
    Email
    deckow.evangeline@yahoo.com
    Phone
    (274)890-0685
  • First Name
    Demetris
    Last Name
    Welch
    Email
    lonnie.fahey@welch.biz
    Phone
    1-179-197-1006x350
  • First Name
    Kennith
    Last Name
    Littel
    Email
    smitham.amelia@gmail.com
    Phone
    863.712.1363x9425
  • First Name
    Sigrid
    Last Name
    Beer
    Email
    cbogan@crooks.com
    Phone
    143-756-9961
  • First Name
    Yvette
    Last Name
    Hammes
    Email
    brown.lorenzo@grimesstanton.com
    Phone
    449-149-4595x297
  • First Name
    Colt
    Last Name
    Murazik
    Email
    clarissa.yundt@yahoo.com
    Phone
    (746)735-9791

Published on 15 May 2013

comments powered by Disqus