<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();
});