A-Z Final Form?

by Brett

HTML

<div class="filters">
    <div class="a-z-search-wrapper">
        <label for="a-z-search">Search A-Z by name</label>    
        <input class="a-z-search" id="a-z-search" type="text" placeholder="Type here to auto search..." />
    </div>
    <form class="alpha">
        <input type="radio" name="fl-alpha" value="all" id="all" /><label for="all">ALL</label>
        <input type="radio" name="fl-alpha" value="alpha-a" id="alpha-a" /><label for="alpha-a">A</label>
        <input type="radio" name="fl-alpha" value="alpha-b" id="alpha-b" /><label for="alpha-b">B</label>
        <input type="radio" name="fl-alpha" value="alpha-c" id="alpha-c" /><label for="alpha-c">C</label>
        <input type="radio" name="fl-alpha" value="alpha-d" id="alpha-d" /><label for="alpha-d">D</label>
        <input type="radio" name="fl-alpha" value="alpha-e" id="alpha-e" /><label for="alpha-e">E</label>
        <input type="radio" name="fl-alpha" value="alpha-f" id="alpha-f" /><label for="alpha-f">F</label>
        <input type="radio" name="fl-alpha" value="alpha-g" id="alpha-g" /><label for="alpha-g">G</label>
        <input type="radio" name="fl-alpha" value="alpha-h" id="alpha-h" /><label for="alpha-h">H</label>
        <input type="radio" name="fl-alpha" value="alpha-i" id="alpha-i" /><label for="alpha-i">I</label>
        <input type="radio" name="fl-alpha" value="alpha-j" id="alpha-j" /><label for="alpha-j">J</label>
        <input type="radio" name="fl-alpha" value="alpha-k" id="alpha-k" /><label for="alpha-k">K</label>
        <input type="radio" name="fl-alpha" value="alpha-l" id="alpha-l" /><label for="alpha-l">L</label>
        <input type="radio" name="fl-alpha" value="alpha-m" id="alpha-m" /><label for="alpha-m">M</label>
        <input type="radio" name="fl-alpha" value="alpha-n" id="alpha-n" /><label for="alpha-n">N</label>
        <input type="radio" name="fl-alpha" value="alpha-o" id="alpha-o" /><label for="alpha-o">O</label>
        <input type="radio" name="fl-alpha"...

CSS

body {
    display: block;
    margin: 0 auto;
    max-width: 1020px;
    font-family: 'Arial';
    color: #646464;
}

.filters {
    position: relative; 
    margin: 0;
    background: #eee;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 68%, rgba(238,238,238,1) 95%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(68%,rgba(255,255,255,1)), color-stop(95%,rgba(238,238,238,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: url('http://stage.denison.edu/sites/all/themes/denison/images/background_calendar_header_shadow.png') no-repeat center bottom;
    overflow: visible;
}

.a-z-search-wrapper {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 20px 0 30px;
    background: #000;
}

.a-z-search-wrapper label {
    display: none;
}

input[type=text].a-z-search {
    display: block;
    margin: 0 auto;
    width: 75%; 
    max-width: 700px;
    padding: 15px 50px 30px 20px;
    background: transparent url('https://cdn.denison.edu/sites/all/themes/denison/images/icon_search_large_atoz.png') no-repeat right 15px;
    color: #fff;
    font-family: 'Didot W01 Italic', serif;
    font-size: 1.6em;
    font-weight: 100;
    text-align: center;
    text-transform: uppercase;
    border: 0;
    outline: none;
}
    input[type=text].a-z-search::-webkit-input-placeholder { color: #777; }
    input[type=text].a-z-search:-moz-placeholder { /* Firefox 18- */ color: #777;  }
    input[type=text].a-z-search::-moz-placeholder {  /* Firefox 19+ */ color: #777; }
    input[type=text].a-z-search:-ms-input-placeholder { /* IE */color: #777; }

.alpha {
    width: 100%;
    margin: 20px 0 0;
   ...

JavaScript

var byAlpha = [],
    byCat = [],
    byLocation = [];

$('input[name=fl-alpha]').on('change', function() {
    if (this.checked) byAlpha.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byAlpha, "[data-category~='" + $(this).attr("value") + "']");
});

$('input[name=fl-cat]').on('change', function() {
    if (this.checked) byCat.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byCat, "[data-category~='" + $(this).attr("value") + "']");
});

$('input[name=fl-cont]').on('change', function() {
    if (this.checked) byLocation.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byLocation, "[data-category~='" + $(this).attr("value") + "']");
});

$('input[name^=fl]').on('change', function() {
    var str = 'Include items \n';
    var selector = '',
        cselector = '',
        nselector = '';

    var $results = $('.view-content > .views-row'),
        $checked = $(':checkbox[name^=fl]');

    if ($checked.length) {
        if (byAlpha.length) {
            if (str == "Include items \n") {
                str += "    " + "with (" + byAlpha.join(',') + ")\n";
                $($('input[name=fl-alpha]:checked')).each( function(index, byAlpha) {
                    if (selector === '') {
                        selector += "[data-category~='" + byAlpha.id + "']";
                    } else {
                        selector += ",[data-category~='" + byAlpha.id + "']";
                    }
                });
            } else {
                str += "    AND " + "with (" + byAlpha.join(' OR ') + ")\n";
                $($('input[name=fl-alpha]:checked')).each( function(index, byAlpha) {
                    selector += "[data-category~='" + byAlpha.id + "']";
                });
            }
        }

        if (byCat.length) {
            if (str == "Include items \n") {
                str += "    " + "with (" + byCat.join(' OR ') + ")\n";
               ...