<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 well "> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 col-xl-2"> <span class="srchLabel">Search</span> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> <input placeholder="Search..." type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false" id="txtSearch"> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <button type="button" class="btn btn-primary btnSearchOptions">Search Options</button> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-10 col-lg-12 col-xl-12"> <span class="engAlpha"> <div class="pagination pagination-large"> <ul class="pager"> </ul> </div> </span> </div> </div> </div> <div class="row well displayProfiles"> <div class="row"> <div class="col-sm-4"> <div class="card"> <div class="avatar"> <img src="https://secure.gravatar.com/avatar/de9b11d0f9c0569ba917393ed5e5b3ab?s=140&r=g&d=mm" alt="" /> </div> <div class="content"> <p class="personName">Varun Jindal</p> <p class="profInfo">AVP, SharePoint Developer <br>Information Technology</p> </div> <a data-toggle="collapse" data-target="#collapseExampleDong" aria-expanded="false" aria-controls="collapseExample"> <div class="arrow"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> </a> <div class="collapse" id="collapseExampleDong"> <div class="card card-block"> <table class="table table-user-information"> <tbody> <tr> <td>Email:</td> <td><a href="mailto:info@support.com">vjindal@ca.mufg.ca</a></td> </tr> <tr> <td>Ext:</td> <td>8966</td> </tr> <tr> <td>Mobile No.</td> <td>123-456-8990</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <div class="avatar"> <img src="https://secure.gravatar.com/avatar/de9b11d0f9c0569ba917393ed5e5b3ab?s=140&r=g&d=mm" alt="" /> </div> <div class="content"> <p class="personName">Varun Jindal</p> <p class="profInfo">AVP, SharePoint Developer <br>Information Technology</p> </div> <a data-toggle="collapse" data-target="#collapseExampleVarun" aria-expanded="false" aria-controls="collapseExample"> <div class="arrow"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> </a> <div class="collapse" id="collapseExampleVarun"> <div class="card card-block"> <table class="table table-user-information"> <tbody> <tr> <td>Email:</td> <td><a href="mailto:info@support.com">vjindal@ca.mufg.ca</a></td> </tr> <tr> <td>Ext:</td> <td>8966</td> </tr> <tr> <td>Mobile No.</td> <td>123-456-8990</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <div class="avatar"> <img src="https://secure.gravatar.com/avatar/de9b11d0f9c0569ba917393ed5e5b3ab?s=140&r=g&d=mm" alt="" /> </div> <div class="content"> <p class="personName">Varun Jindal</p> <p class="profInfo">AVP, SharePoint Developer <br>Information Technology</p> </div> <a data-toggle="collapse" data-target="#collapseExampleJohn" aria-expanded="false" aria-controls="collapseExample"> <div class="arrow"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> </a> <div class="collapse" id="collapseExampleJohn"> <div class="card card-block"> <table class="table table-user-information"> <tbody> <tr> <td>Email:</td> <td><a href="mailto:info@support.com">vjindal@ca.mufg.ca</a></td> </tr> <tr> <td>Ext:</td> <td>8966</td> </tr> <tr> <td>Mobile No.</td> <td>123-456-8990</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); .srchLabel { font-weight: bold; padding-left: 10px; text-transform: uppercase; margin-top: 60px; line-height: 2; } .btnSearchOptions { border-radius: 20px; width: 250px; text-transform: uppercase; font-weight: 600; font-stretch: expanded; background-color: #BA0100 !important; border-color: #BA0100 !important; background-image: linear-gradient(to bottom, #820000 0, #BA0100 70%); height: 30px; } .pager li>a { padding: 5px 10px; background-color: grey; color: #fff; } .activeLink { background-color: #BA0100; } .pager li>a:hover { padding: 5px 10px; background-color: #BA0100; color: #fff; } .pager li:nth-child(10)>a { padding: 5px 13px !important; } .src-image { display: none; } .card { overflow: hidden; position: relative; border: 1px solid #CCC; border-radius: 8px; text-align: center; padding: 0; background-color: #fff; color: #000; } .card .content { position: relative; margin: 15px; z-index: 100; text-align:left; } .card .avatar { position: relative; margin:15px 15px 5px 15px; z-index: 100; float:left; } .profileImg { } .card .avatar img { width:80px ; height:80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .pager li { margin-left: 5px !important; } .table-user-information { text-align: left; font-size: 12px; } .displayProfiles { background-color: #fff; box-shadow: 3px 1px 8px rgba(0,0,0,0.2) !important; background-image: none !important; } .personName { text-transform: uppercase; font-weight: bold; font-family: sans-serif; color: #BA0100; letter-spacing: 1px; } .arrow { margin-top:25px; } .profInfo { font-size:12px; letter-spacing:1px; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 30px; font-size: 12px; /* Set input font size */ height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; font-family: sans-serif; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid #0097CF; } .tt-query { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .tt-hint { color: #999999; } .tt-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 12px; padding: 8px 0; width: 422px; } .tt-suggestion { font-size: 22px; /* Set suggestion dropdown font size */ padding: 3px 20px; } .tt-suggestion:hover { cursor: pointer; background-color: #0097CF; color: #FFFFFF; } .tt-suggestion p { margin: 0; }

var engAlphabets = ['All', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; $.each(engAlphabets, function(index, value) { $('<li><a href="#" class="letters">' + value + '</a></li>').appendTo('.pager'); }); $(".pager li:nth-child(1) a").css('background-color', '#BA0100'); $("#txtSearch").on("keypress", function(event) { // Disallow anything not matching the regex pattern (A to Z uppercase, a to z lowercase and white space) // For more on JavaScript Regular Expressions, look here: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions var englishAlphabetAndWhiteSpace = /[A-Za-z ]/g; // Retrieving the key from the char code passed in event.which // For more info on even.which, look here: http://stackoverflow.com/q/3050984/114029 var key = String.fromCharCode(event.which); //alert(event.keyCode); // For the keyCodes, look here: http://stackoverflow.com/a/3781360/114029 // keyCode == 8 is backspace // keyCode == 37 is left arrow // keyCode == 39 is right arrow // englishAlphabetAndWhiteSpace.test(key) does the matching, that is, test the key just typed against the regex pattern if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) { return true; } // If we got this far, just return false because a disallowed key was typed. return false; }); $('#txtSearch').on("paste", function(e) { e.preventDefault(); });