JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<input class="a-z-search" type="text" id="a-z-search" placeholder="Type here to auto search...">
    
<form class="alpha">
    <input type="radio" name="fl-alpha" value="all" id="all" checked="checked" /><label for="all">ALL</label>
    <input type="radio" name="fl-alpha" value="a" id="a" /><label for="a">A</label>
    <input type="radio" name="fl-alpha" value="b" id="b" /><label for="b">B</label>
    <input type="radio" name="fl-alpha" value="c" id="c" /><label for="c">C</label>
    <input type="radio" name="fl-alpha" value="d" id="d" /><label for="d">D</label>
    <input type="radio" name="fl-alpha" value="e" id="e" /><label for="e">E</label>
    <input type="radio" name="fl-alpha" value="f" id="f" /><label for="f">F</label>
    <input type="radio" name="fl-alpha" value="g" id="g" /><label for="g">G</label>
    <input type="radio" name="fl-alpha" value="h" id="h" /><label for="h">H</label>
    <input type="radio" name="fl-alpha" value="i" id="i" /><label for="i">I</label>
    <input type="radio" name="fl-alpha" value="j" id="j" /><label for="j">J</label>
    <input type="radio" name="fl-alpha" value="k" id="k" /><label for="k">K</label>
    <input type="radio" name="fl-alpha" value="l" id="l" /><label for="l">L</label>
    <input type="radio" name="fl-alpha" value="m" id="m" /><label for="m">M</label>
    <input type="radio" name="fl-alpha" value="n" id="n" /><label for="n">N</label>
    <input type="radio" name="fl-alpha" value="o" id="o" /><label for="o">O</label>
    <input type="radio" name="fl-alpha" value="p" id="p" /><label for="p">P</label>
    <input type="radio" name="fl-alpha" value="q" id="q" /><label for="q">Q</label>
    <input type="radio" name="fl-alpha" value="r" id="r" /><label for="r">R</label>
    <input type="radio" name="fl-alpha" value="s" id="s" /><label for="s">S</label>
    <input type="radio" name="fl-alpha" value="t" id="t" /><label for="t">T</label>
    <input type="radio" name="fl-alpha" value="u" id="u" /><label for="u">U</label>
...

CSS

body {
    font-family: 'Arial';
    color:#646464;
}

#a-z-search {
    margin: 20px 0;
    padding: 10px 50px 10px 10px;
    min-width: 50%;
}

.alpha {
    margin-top: 20px;
}

.alpha input[type=radio] {
    display: none;
    visibility: hidden;
}

.alpha label {
    display: inline-block;
    margin: 0;
    padding: 4px;
    text-align: center;
    cursor: pointer;
}

.alpha input[type=radio]:checked + label {
    background: #b8252b;
    color: #fff;
}

.categories {
    margin: 20px 0;
}

.categories input[type=checkbox] {
    /*display: none;
    visibility: hidden;*/
}

.categories label {
    display: inline-block;
    width: 15%;
    margin: 0 0 0 -4px;
    text-align: center;
    cursor: pointer;
}

.filtering-wrap {
    float: left;
    position: relative;
    width: 20%;
    margin: 0 5% 200px 0;
    padding: 0;
}

.subcategories input[type=checkbox] + label {
    cursor: pointer;
    margin: 4px 0;
}

.results {
    float: left;
    width: 70%;
    margin: 0 0 40px;
}

.results .result {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.student-search {
    display: none;
    clear: both;
}

JavaScript

var $results = $('.results > .result'),
    $checks = $(':checkbox[name^=fl], :radio[name^=fl]');

$checks.change(function() {
    var $checked = $checks.filter(':checked');
    $('#a-z-search').val('').change();
    $('mark.highlight').remove();
    
    // show all when nothing checked
    if(!$checked.length) {
        $results.show();
        return; // quit if nothing is checked
    }
    
    // create array of checked values
    var checkedVals = $.map($checked, function(el) {
        return el.value;
    });
    
    // hide all results, then filter for matches
    $results.hide().filter(function() {

        // split categories for this result into an array
        var cats = $(this).data('category').split(' ');
        
        // filter the checkedVals array to only values that match
        var checkMatches = $.grep(checkedVals, function(val) {         
            return $.inArray(val, cats) > -1;
        });
        
        // only return elements with matched array and original array being same length            
        return checkMatches.length === checkedVals.length;
    
    // show results that match all the checked checkboxes        
    }).show();
    
    // do something when there aren't any matches
    if(!$results.length) {
        console.log('No results found using these filters.');
    }
});



/**
 * HideSeek jQuery plugin
 * @copyright Copyright 2013, Dimitris Krestos
 * @license   Apache License, Version 2.0 (http://www.opensource.org/licenses/apache2.0.php)
 * @link      http://vdw.staytuned.gr
 * @version   v0.5.5
 * Dependencies are include in minified versions at the bottom:
 * 1. Highlight v4 by Johann Burkard
 */
!function(e){"use strict";e.fn.hideseek=function(t){var i={list:".hideseek-data",nodata:"",attribute:"text",highlight:!1,ignore:"",navigation:!1,ignore_accents:!1},t=e.extend(i,t);return this.each(function(){var...