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 protected]
- Phone
- 1-265-479-1196x714
-
- First Name
- Newton
- Last Name
- Cronin
- [email protected]
- Phone
- (121)644-5577
-
- First Name
- Adrianna
- Last Name
- Rath
- [email protected]
- Phone
- 119-040-0800x47661
-
- First Name
- Damien
- Last Name
- Howe
- [email protected]
- Phone
- +97(7)8318939455
-
- First Name
- Alayna
- Last Name
- Bergnaum
- [email protected]
- Phone
- (274)890-0685
-
- First Name
- Demetris
- Last Name
- Welch
- [email protected]
- Phone
- 1-179-197-1006x350
-
- First Name
- Kennith
- Last Name
- Littel
- [email protected]
- Phone
- 863.712.1363x9425
-
- First Name
- Sigrid
- Last Name
- Beer
- [email protected]
- Phone
- 143-756-9961
-
- First Name
- Yvette
- Last Name
- Hammes
- [email protected]
- Phone
- 449-149-4595x297
-
- First Name
- Colt
- Last Name
- Murazik
- [email protected]
- Phone
- (746)735-9791
Tweet
Published on 15 May 2013
Redo The Web, a blog by François Zaninotto
fzaninotto
@francoisz
rss