Demo for Jquery Fuzzy

Demo for Jquery Fuzzy author(s): Kyle Domingo

HTML

<script src="https://cdn.jsdelivr.net/gh/kedomingo/jqueryfuzzy/jquery.fuzzy.js"></script>
Search: <input type="text" id="searchBar" /> (try searching for "the dog")<br /><br />

<div id="dataset">
    <div class="row" id="row1">The quick brown fox jumps over the lazy dog.</div>
    <div class="row" id="row2">My Mum tries to be cool by saying that she likes all the same things that I do.</div>
    <div class="row" id="row3">If the Easter Bunny and the Tooth Fairy had babies would they take your teeth and leave chocolate for you?</div>
    <div class="row" id="row4">A purple pig and a green donkey flew a kite in the middle of the night and ended up sunburnt.</div>
    <div class="row" id="row5">What was the person thinking when they discovered cow's milk was fine for human consumption... and why did they do it in the first place!?</div>
    <div class="row" id="row6">Last Friday in three week's time I saw a spotted striped blue worm shake hands with a legless lizard.</div>
    <div class="row" id="row7">Wednesday is hump day, but has anyone asked the camel if he's happy about it?</div>
    <div class="row" id="row8">If Purple People Eaters are real... where do they find purple people to eat?</div>
    <div class="row" id="row9">A song can make or ruin a person's day if they let it get to them.</div>
    <div class="row" id="row10">Sometimes it is better to just walk away from things and go back to them later when you're in a better frame of mind.</div>
    <div class="row" id="row11">Writing a list of random sentences is harder than I initially thought it would be.</div>
    <div class="row" id="row12">Where do random thoughts come from?</div>
    <div class="row" id="row13">Lets all be unique together until we realise we are all the same.</div>
    <div class="row" id="row14">I will never be this young again. Ever. Oh damn... I just got older.</div>
    <div class="row" id="row15">If I don't like something, I'll stay away from it.</div>
    <div class="row"...

CSS

body {
    font: normal 11pt sans-serif;
}
div.row {
    margin: 5px;
    padding: 5px;
    border: solid 1px #ddd;
}
.hltitle .hl {
    background: #fffa90;
}

JavaScript

$(function(){

    var dataset = [];
    var i = 1;
    $('div#dataset .row').each(function(){
        // Make a way to remember this data accessible easily. We assigned an id
        dataset.push({title: $(this).text(), id: $(this).attr('id')});
    });

    $('#searchBar')
        .fuzzy({
            dataset : dataset,
            searchkey: 'title'
        })
        .on('fuzzy.clear', function(e, matches){
            // delete previously highlighted rows
            $('.row.highlight').remove();
            // Show rows
            $('div#dataset .row').show();
        })
        .on('fuzzy.search', function(e, matches){
            // Matches will be the same as dataset, except it now has a new key: hlString (highlight string)

            // delete previously highlighted rows
            $('.row.highlight').remove();
            // Hide rows
            $('div#dataset .row').hide();

            var i;
            for (i in matches) {
                var match = matches[i];
                // Use the id to show the highlighted string
                $row = $('<div class="row highlight">'+match['hlString']+'</div>');
                $('#'+match.id).after($row);
            }
        });
});