acs student director search

by Stephen Lujan

HTML

<link rel="stylesheet" href="//assets.acs.org/v2.0/acs-bootstrap/css/acs-bootstrap.css">
<link rel="stylesheet" href="//assets.acs.org/v2.0/cq5/css/main.css">
<link rel="stylesheet" href="assets.acs.org/v2.0/cq5/css/responsive.css">
<script src="http://assets.acs.org/v2.0/acs-bootstrap/js/acs.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- Button to trigger modal -->
<a id="modalButton" href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
         <h3 style="display: inline-block;" id="myModalLabel">Chapter Search</h3>

        <input id="chapterSearch" type="text" class="search-query pull-right" placeholder="Search">
    </div>
    <div class="modal-body">
        <ul id="chapterSearchList">
            <li class="row-fluid">
                <div class="name span4">Jacquiline Jager</div>
                <div class="city span4">Pasadena CA</div>
                <button data-dismiss="modal" class="span4">Select</button>
            </li>
            <li class="row-fluid">
                <div class="name span4">Leon Lenoir</div>
                <div class="city span4">Pasadena CA</div>
                <button data-dismiss="modal" class="span4">Select</button>
            </li>
            <li class="row-fluid">
                <div class="name span4">Silvia Steckel</div>
                <div class="city span4">Pasadena CA</div>
                <button data-dismiss="modal" class="span4">Select</button>
            </li>
            <li class="row-fluid">
                <div class="name span4">Melba Mcguinness</div>
                <div class="city span4">Pasadena CA</div>
                <button...

CSS

/* ------------------ */
/* search modal */
.name {
    font-weight: bold;
}
.city {
    margin-left: auto;
    margin-right: auto;
}

#chapterSearchList {
    list-style-type: none;
}
#chapterSearchList li {
    list-style-type: none;
    margin: 2px;
    padding: 3px;
    border: 1px solid #999999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#chapterSearchList div {
    display: inline;
}
/* end search modal */
/* ------------------ */

JavaScript

$('#chapterSearch').keyup(function () {
    var valThis = $(this).val().toLowerCase();
    $('#chapterSearchList>li').each(function () {
        var text = $(this).children(".name").text().toLowerCase();
        (text.indexOf(valThis) != -1) ? $(this).show() : $(this).hide();
    });
});
$('#chapterSearchList>li').each(function () {
    var name = $(this).children(".name").text();
    var select = $(this).children("button").click(function () {
        $('#modalButton').html(name);
    });
});