JSFiddle - React, Tailwind, and code Playground

by USvER

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://github.com/riklomas/quicksearch/raw/dev/jquery.quicksearch.js"></script>
<form class="form-horizontal well">
    <fieldset>
        <legend>Search with CSS3 vs JavaScript (QuickSearch)</legend>
        <div class="control-group">
            <label class="control-label" for="CSSBox">CSS3</label>
            <div class="controls">
              <div class="input-append">
                <input class="input-small" id="CSSBox" size="16" type="text"><span id="CSSTime" class="add-on">0ms</span>
              </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="QSBox">QuickSearch</label>
            <div class="controls">
              <div class="input-append">
                <input class="input-small" id="QSBox" size="16" type="text"><span id="QSTime" class="add-on">0ms</span>
              </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="transitions">Options</label>
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" name="transitions" id="OptionBox" checked="">
                    Smooth transitions
                </label>
            </div>
        </div>
    </fieldset>
</form>
<div class="item">Afghanistan</div>
<div class="item">Albania</div>
<div class="item">Algeria</div>
<div class="item">Andorra</div>
<div class="item">Angola</div>
<div class="item">Antigua and Barbuda</div>
<div class="item">Argentina</div>
<div class="item">Armenia</div>
<div class="item">Australia</div>
<div class="item">Austria</div>
<div class="item">Azerbaijan</div>
<div class="item">Bahamas</div>
<div class="item">Bahrain</div>
<div class="item">Bangladesh</div>
<div class="item">Barbados</div>
<div class="item">Belarus</div>
<div class="item">Belgium</div>
<div...

CSS

body{padding: 10px;}
#time{margin-left: 10px;}

.item {
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    -ms-transition: all 150ms ease-in;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
}

.item-hide{
    height: 0px !important;
    line-height: 0px !important;
    opacity: 0.5 !important;
}

JavaScript

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

function startTimeLog() {
    console.time("Searching");
    Time = new Date().getTime();
}

function stopTimeLog(result) {
    // Thanks to ivan386 from habrahabr for setTimeout solution
    setTimeout(function() {
        console.timeEnd("Searching");
        result.innerHTML = (new Date().getTime() - Time) + 'ms';
    }, 0);
}

function search() {
    startTimeLog();
    var selector = '';
    var keywords = CSSBox.value.toLowerCase().split(' ').filter(Boolean);
    if (keywords.length > 0) {
        for (var i = 0; i < keywords.length; i++) {
            selector += (i == 0 ? '' : ',') + '.item:not([index*="' + keywords[i] + '"])';
        }
        if (transitions) var style = selector + '{height: 0px; line-height: 0px; opacity: 0.5}';
        else var style = selector + '{display: none}';

        css.innerHTML = style;
    } else {
        css.innerHTML = "";
    }
    stopTimeLog(CSSTime);
}

$(document).ready(function() {
    OptionBox = document.getElementById('OptionBox');
    CSSTime = document.getElementById('CSSTime');
    CSSBox = document.getElementById('CSSBox');

    QSTime = document.getElementById('QSTime');
    QSBox = document.getElementById('QSBox');

    // Indexing all items for CSS search
    $('.item').each(function(key, value) {
        $(value).attr('index', $(this).text().toLowerCase());
    });

    $(CSSBox).bind("keyup focus", search);
    $(CSSBox).blur(function() {
        css.innerHTML = "";
    });

    $(QSBox).quicksearch('.item', {
        'delay': 0,
        'bind': "keyup focus",
        'show': function() {
            if (transitions) $(this).removeClass('item-hide');
            else this.style.display = "";
        },
        'hide': function() {
            if (transitions) $(this).addClass('item-hide');
            else this.style.display = "none";
...