<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div><strong>Hiring Manager *</strong></div> <div class="picker-container editable required" data-num-chars="2" data-value="" data-url="/api/intuit/workers" name="hiring_manager" id="hiring_manager"><span id="hiring_manager_text" class="picker-value-container">None selected</span><i class="icon-chevron-right"></i></div> <br /><br /> <div><strong>Job Title or Job Code *</strong></div> <div class="picker-container editable required" data-num-chars="2" data-value="" data-url="/api/intuit/workers" name="hiring_manager" id="job_code"><span class="picker-value-container">None selected</span><i class="icon-chevron-right"></i></div> <!-- 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 id="myModalLabel">Select Hiring Manager</h3> </div> <div class="modal-body"> <input id="hiring_manager_search" class="picker-search full" style="margin-bottom: 5px;" placeholder="Type at least 2 characters" data-url="/api/intuit/workers" data-num-chars="2"> <ul id="hiring_manager_searching" class="nav nav-tabs nav-stacked picker-list hide" data-target="hiring_manager"><li class="picker-item"><a href="#" disabled="disabled">Searching...</a></li></ul> <ul id="hiring_manager_list" class="nav nav-tabs nav-stacked picker-list hide" data-target="hiring_manager"><li class="picker-item" id="90919"><a>Angela Mattix (Angela_Mattix@intuit.com)</a></li><li class="picker-item" id="79249"><a>Ari Mattson (cc.staging.unib@gmail.com)</a></li><li class="picker-item" id="96951"><a>Ashwin Mattur Venkatasubbaraya (Ashwin_Venkatasubbaraya@intuit.com)</a></li><li class="picker-item" id="81332"><a>Donald Mattox (Don_Mattox@intuit.com)</a></li><li class="picker-item" id="78949"><a>George Chiramattel (George_Chiramattel@intuit.com)</a></li></ul> </div> <div id="hiring_manager_footer" class="modal-footer hide"> <div class="mhs page-container"> <ul class="pager" data-page="1"> <li class="previous panel-previous disabled"><a href="#">← Prev</a></li> <li class="next panel-next"><a href="#">Next →</a></li> </ul> <div class="clearfix"></div> <div class="text-center">Current Page: <span class="current-page">1</span> of <span class="total-page">26</span></div> <div class="text-center">Total entries: <span class="total-entries">130</span></div> </div> </div> </div> <!-- Modal --> <div id="job_code_modal" 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 id="myModalLabel">Select a Job Title</h3> </div> <div class="modal-body"> <input id="job_code_search" class="picker-search full" style="margin-bottom: 5px;" placeholder="Type at least 2 characters" data-url="/api/intuit/workers" data-num-chars="2"> <ul id="job_code_searching" class="nav nav-tabs nav-stacked picker-list hide" data-target="hiring_manager"><li class="picker-item"><a href="#" disabled="disabled">Searching...</a></li></ul> <ul id="job_code_list" class="nav nav-tabs nav-stacked picker-list hide" data-target="hiring_manager"><li class="picker-item" id="EADM11"><a><strong>Title:</strong> Administrative Assistant<br><strong>Job Code:</strong> EADM11<br><strong>Family:</strong> ADM - Admin-Executive Asst</a></li><li class="picker-item" id="CAGR13"><a><strong>Title:</strong> Agent Relations Lead<br><strong>Job Code:</strong> CAGR13<br><strong>Family:</strong> AGR - Agent Relations</a></li><li class="picker-item" id="CAGR11"><a><strong>Title:</strong> Agent Relations Rep 1<br><strong>Job Code:</strong> CAGR11<br><strong>Family:</strong> AGR - Agent Relations</a></li><li class="picker-item" id="ASWA14"><a><strong>Title:</strong> Application Ops Eng 1<br><strong>Job Code:</strong> ASWA14<br><strong>Family:</strong> SWA - Software Application</a></li><li class="picker-item" id="ASWA21"><a><strong>Title:</strong> Application Ops Eng 2<br><strong>Job Code:</strong> ASWA21<br><strong>Family:</strong> SWA - Software Application</a></li></ul> </div> <div id="job_code_footer" class="modal-footer hide"> <div class="mhs page-container"> <ul class="pager" data-page="1"> <li class="previous panel-previous disabled"><a href="#">← Prev</a></li> <li class="next panel-next"><a href="#">Next →</a></li> </ul> <div class="clearfix"></div> <div class="text-center">Current Page: <span class="current-page">1</span> of <span class="total-page">33</span></div> <div class="text-center">Total entries: <span class="total-entries">164</span></div> </div> </div> </div> </div>

.container { height: 1000px; } .picker-container.required { border: 2px solid rgba(236, 137, 124, 0.8); outline: 0 none; } .picker-container .icon-chevron-right { float: right; } .picker-container { background-color: #fff; border-radius: 4px; cursor: pointer; padding: 3px 5px; width: 250px; } .picker-item { cursor: pointer; } .modal-header { background-color: #75b9f0; } .full { width: 100%; }

$(document).ready(function () { $('#hiring_manager').click(function () { $('#myModal').modal(); }); $('#hiring_manager_search').on('keyup', function (e) { var value = $('#hiring_manager_search').val(); value = value.toLowerCase(); if (value === 'matt') { $('#hiring_manager_list').show(); $('#hiring_manager_footer').show(); $('#hiring_manager_searching').hide(); } else if (value.length > 2) { $('#hiring_manager_list').hide(); $('#hiring_manager_footer').hide(); $('#hiring_manager_searching').show(); } else { $('#hiring_manager_list').hide(); $('#hiring_manager_footer').hide(); $('#hiring_manager_searching').hide(); } }); $('#90919').on('click', function () { $('#myModal').modal('hide'); $('#hiring_manager_text').html('Angela Mattix'); }); $('#job_code').click(function () { $('#job_code_modal').modal(); }); $('#job_code_search').on('keyup', function (e) { var value = $('#job_code_search').val(); value = value.toLowerCase(); if (value === 'at') { $('#job_code_list').show(); $('#job_code_footer').show(); $('#job_code_searching').hide(); } else if (value.length > 2) { $('#job_code_list').hide(); $('#job_code_footer').hide(); $('#job_code_searching').show(); } else { $('#job_code_list').hide(); $('#job_code_footer').hide(); $('#job_code_searching').hide(); } }); });