JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<div class='search'>
    <input type='text' id='search' placeholder='Search' />
</div>

<div id='search-results'><ul class='children'><li><span class="toggle"></span><a class="link" href="#">Gather Information</a><ul class="children"><li><span class="toggle"></span><a class="link" href="#">Excavation</a><ul class="children"><li><span class="toggle"></span><a class="link" href="#">JSON Hijacking (aka JavaScript Hijack</a></li><li><span class="toggle"></span><a class="link" href="#">Fuzzing for garnering (through web or</a></li><li><span class="toggle"></span><a class="link" href="#">Cross-Domain Search Timing</a></li><li><span class="toggle"></span><a class="link" href="#">Generic Cross-Browser Cross-Domain Th</a></li><li><span class="toggle"></span><a class="link" href="#">Probing Application Screenshots</a></li><li><span class="toggle"></span><a class="link" href="#">Probing an Application Through Target</a><ul class="children"><li><span class="toggle"></span><a class="link" href="#">Fuzzing for garnering J2EE/.NET-ba</a></li><li><span class="toggle"></span><a class="link" href="#">Fuzzing and observing application</a></li></ul></li></ul></li><li><span class="toggle"></span><a class="link" href="#">Interception</a><ul class="children"><li><span class="toggle"></span><a class="link" href="#">Sniffing Attacks</a><ul class="children"><li><span class="toggle"></span><a class="link" href="#">Sniffing Network Traffic</a><ul class="children"><li><span class="toggle"></span><a class="link" href="#">Passively Sniff and Capture App</a><ul class="children"><li><span class="toggle"></span><a class="link" href="#">Passively Sniffing and Captu</a></li><li><span class="toggle"></span><a class="link" href="#">Passively Sniffing and Captu</a></li><li><span class="toggle"></span><a class="link" href="#">Passively Sniffing and Captu</a></li></ul></li></ul></li></ul></li><li><span class="toggle"></span><a class="link" href="#">Accessing/Intercepting/Modifying HTTP</a></li><li><span...

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Helvetica Neue';
    padding: 40px;
}
a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 10px 0;
}
#root .children, #search-results li {
    display: none;
}
#search-results .toggle {
    display: none;
}
#search-results {
    background: #eee;
    border: 2px solid #ccc;
    padding: 20px;
}
.toggle {
    cursor: pointer;
}
.toggle:before {
    display: inline-block;
    content: '►';
    width: 30px;
    text-align: left;
}
.toggle.noop:before {
    content: '';
    min-height: 1px;
}
li {
    display: block;
}
li.expanded > .toggle:before {
    content: '▼';
}
#search-results {
    display: none;
}
ul ul {
    margin-left: 10px;
    padding-left: 20px;
    border-left: 2px solid rgba(0, 0, 0, .1);
}
input[type="text"] {
    width: 100%;
    padding: 10px;
    font: inherit;
    margin-bottom: 1em;
}
.link.selected {
    outline: 1px solid #f00;
}

JavaScript

function sort(text) {
    var tokens = text.toUpperCase().split(/\s+/);
    if (text.length < 2) {
        $('#search-results li').removeClass('.expanded').hide();
        $('#search-results').hide();
        return;
    }
    $('#search-results').show();
    $('#search-results li').hide();
    console.log(text);
    $('.link').each(function() {
        var match = true, i,
            title = $(this).text().toUpperCase();
        for (i = 0; i < tokens.length; i += 1) {
            if (title.indexOf(tokens[i]) == -1) {
                match = false;
            }
        }
        if (match) {
            $(this).parents('li').show();
        }
    });
}

$(document).on('input', '#search', function(e) {
    var $el = $(this);
    sort($el.val());
});

$(document).on('click', '#root .toggle', function(e) {
    e.preventDefault();
    $(this).parent().toggleClass('expanded')
        .children('.children').toggle();
});

$(document).on('click', '#root .link', function(e) {
    e.preventDefault();
    $('#root .selected').removeClass('selected');
    $(this).toggleClass('selected');
});

$(document).on('click', '#search-results .link', function(e) {
    e.preventDefault();
    var text = $(this).text().replace(/"/g, '\\"');
    var otherElement = $('#root a:contains("' + text + '")').first();
    $('#root .selected').removeClass('selected');
    otherElement.addClass('selected');
    otherElement.parents('.children').show()
                    .parents('li').addClass('expanded');
});

$('li').each(function() {
    if ($(this).children('.children').size() == 0) {
        $(this).children('.toggle').addClass('noop');
    }
});