Locations Filtering

by Akram kamal

HTML

<body>
    <form>
        <fieldset data-role="controlgroup">
            <legend>Reports to retrieve for locations selected:</legend>
            <input name="checkbox-t-2a" id="checkbox-t-2a" type="checkbox" data-theme="a">
            <label for="checkbox-t-2a">Report1</label>
            <input name="checkbox-t-2b" id="checkbox-t-2b" type="checkbox" data-theme="a">
            <label for="checkbox-t-2b">Report2</label>
            <input name="checkbox-t-2c" id="checkbox-t-2c" type="checkbox" data-theme="a">
            <label for="checkbox-t-2c">Report3</label>
        </fieldset>
    </form>
    <button>Click here to Get Reports For Selected Locations</button>
    <div id="wrap">
         <h1 id="header">Select locations:</h1>

        <ul id="list">
            <li>
                <input name="chkCincinnati" id="Cincinnati" type="checkbox" data-theme="a"> <a>Cincinnati (Ohio)</a>
            </li>
            <li>
                <input name="chkColumbus" id="Columbus" type="checkbox" data-theme="a"> <a>Columbus (Ohio)</a>
            </li>
            <li>
                <input name="chkCleveland" id="Cleveland" type="checkbox" data-theme="a"> <a>Cleveland (Ohio)</a>
            </li>
            <li>
                <input name="chkLexington" id="Lexington" type="checkbox" data-theme="a"> <a>Lexington (Kentucky)</a>
            </li>
            <li>
                <input name="chkGranger" id="Granger" type="checkbox" data-theme="a"> <a>Granger (Kentucky)</a>
            </li>
            <li>
                <input name="chkBloomington" id="Bloomington" type="checkbox" data-theme="a"> <a>Bloomington (Indiana)</a>
            </li>
        </ul>
    </div>
</body>

CSS

body {
        background:#fff font-size:13px;
    }
    #wrap {
        position:relative;
        width:220px;
        margin:50px auto 0;
    }
    #header {
        position:relative;
        line-height:1em;
    }
    .filterform {
        width:220px;
        font-size:12px;
        display:block;
    }
    .filterform input {
        -moz-border-radius:5px;
        border-radius:5px;
        -webkit-border-radius:5px;
    }

JavaScript

(function ($) {
    // custom css expression for a case-insensitive contains()
    jQuery.expr[':'].Contains = function (a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };


    function listFilter(header, list) { // header is any element, list is an unordered list
        // create and add the filter form to the header
        var form = $("<form>").attr({
            "class": "filterform",
            "action": "#"
        }),
            input = $("<input>").attr({
                "class": "filterinput",
                "type": "text"
            });
        $(form).append(input).appendTo(header);

        $(input)
            .change(function () {
            var filter = $(this).val();
            if (filter) {
                // this finds all links in a list that contain the input,
                // and hide the ones not containing the input while showing the ones that do
                $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
                $(list).find("a:Contains(" + filter + ")").parent().slideDown();
            } else {
                $(list).find("li").slideDown();
            }
            return false;
        })
            .keyup(function () {
            // fire the above change event after every letter
            $(this).change();
        });
    }


    //ondomready
    $(function () {
        listFilter($("#header"), $("#list"));
        $("button").click(function(){
            console.log($(":checkbox").serialize())
        })
    });
}(jQuery));