Поиск с использованием CSS3

Многие наверняка знакомы с плагином quicksearch для jQuery. Этот плагин, перебирая заранее подготовленный список всех элементов и их текстовое представление, проверяет наличие ключевых слов с использованием функции indexOf.

Мне такое решение не понравилось. Я считаю, что этот функционал должен быть нативным.



Похоже, для этого был предназначен псевдокласс :contains(), но НЛО прилетело и опубликовало в стандарте следующее:

6.6.6. Blank
This section intentionally left blank. (This section previously defined a :contains() pseudo-class.)

Я нашел альтернативу: селектор атрибутов [att*=val]. Он позволяет делать выборку элементов с атрибутом содержащим подстроку (что, по сути, является аналогом indexOf). Таким образом динамически добавляя и удаляя стили мы можем сделать поиск практически полностью на CSS и только управляющая логика будет на javascript. Для этого нам нужно заранее создать атрибуты содержащие текстовое представление элементов. Это можно сделать еще на сервере, а можно при помощи javascript на клиенте.

Пример реализации данного метода

if (!document.head) document.head = document.getElementsByTagName('head')[0];
var css = document.createElement("style");
document.head.appendChild(css);

function search() {
    var selector = '';
    var searchBox = document.getElementById('searchBox');
    var keywords = searchBox.value.toLowerCase().split(' ').filter(Boolean);
    for (var i = 0; i < keywords.length; i++)
        selector += (i ? ',' : '') + 'div:not([index*="' + keywords[i] + '"])';
    if (selector) css.innerHTML = selector + '{display: none;}';
    else css.innerHTML = "";
}

$(document).ready(function() {
    $('div').each(function(key, value) {
        $(value).attr('index', $(this).text().toLowerCase());
    });
    $("#searchBox").keyup(search);
});

Live demo

Этот селектор поддерживается во всех современных браузерах (Firefox 3+, Opera 9.5+, IE 7+).
WebKit браузеры тоже поддерживают данный селектор, но из-за проблем с производительностью на операциях с добавлением и удалением стилей, использовать данную технику будет сложно.

[07.06.2012] Update:
Нашел немного времени и провел ревизию своих старых проектов.
Обновил Live demo. Теперь там сравнение поиска на CSS3 и JavaScript(QuickSearch).
Спасибо ivan386 за очень полезный комментарий, благодаря ему возможно правильно замерять скорость.

Back to back comparison

PS: Судя по всему оба варианта работают приблизительно одинаково по скорости, чего и стояло ожидать.