Description: The search bar is a text field attached with a search button icon that allows the user to enter in alpha, numeric, and or special characters to filter through the data depending on where the user is located in the application. The search bar can appear in different sizes or appear just as a search icon button. The user can select the search icon button to trigger a search bar, which holds the same functionality.
508 Guidelines: A search bar uses the input field, which will follow the same guidelines as in the form elements section.
TIP: The placeholder attribute is not supported in ≤ IE10; therefore, it is vital to follow the form elements code to assure it will pass 508 compliance.
<form action="#" method="post">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<label for="searchRecord-responsive" class="sr-only">Search Record</label>
<input type="text" class="form-control" placeholder="Search Record"
title="Please enter in text to search for a patient record." id="searchRecord-responsive" />
<span class="input-group-btn">
<button type="button" class="text-search-accessible btn btn-default"
title="Please select the button to submit your search">
<i class="fa fa-search" title="Submit Search"></i><span class="sr-only">Submit Search</span>
</button>
</span>
</div>
</div>
</div>
</form>
Copy
<!--Large-->
<form action="#" method="post">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<label for="searchRecord-large" class="sr-only">Search Record</label>
<input type="text" class="form-control" placeholder="Search Record"
title="Please enter in text to search for a patient record." id="searchRecord-large" />
<span class="input-group-btn">
<button class="text-search-accessible btn btn-default" type="button" title="Submit Search">
<i class="fa fa-search" title="Submit Search"></i><span class="sr-only">Submit Search</span>
</button>
</span>
</div>
</div>
</div>
</form>
<!--Medium-->
<form action="#" method="post">
<div class="row">
<div class="col-xs-8">
<div class="input-group">
<label for="searchRecord-medium" class="sr-only">Search Record</label>
<input type="text" class="form-control" placeholder="Search Record"
title="Please enter in text to search for a patient record." id="searchRecord-medium" />
<span class="input-group-btn">
<button class="text-search-accessible btn btn-default" type="button" title="Submit Search">
<i class="fa fa-search" title="Submit Search"></i><span class="sr-only">Submit Search</span>
</button>
</span>
</div>
</div>
</div>
</form>
<!--Small-->
<form action="#" method="post">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<label for="searchRecord-small" class="sr-only">Search Record</label>
<input type="text" class="form-control" placeholder="Search Record"
title="Please enter in text to search for a patient record." id="searchRecord-small" />
<span class="input-group-btn">
<button class="text-search-accessible btn btn-default" type="button" title="Submit Search">
<i class="fa fa-search" title="Submit Search"></i><span class="sr-only">Submit Search</span>
</button>
</span>
</div>
</div>
</div>
</form>
Copy
<!--Right-->
<div class="dropdown-search-bar-container">
<div class="dropdown-search-bar-right">
<div class="row">
<div class="col-xs-4">
<button id="search-toggle-right" class="text-search-accessible btn btn-default" title="Submit Search">
<i class="fa fa-search" title="Submit Search"></i><span class="sr-only">Toggle Search Bar</span>
</button>
<div class="search-bar-right">
<form action="#" method="post">
<label for="searchRecord-dropdown-right" class="sr-only">Search Record</label>
<input id="searchRecord-dropdown-right" type="text" id="searchtext" class="form-control"
placeholder="Search Record" autofocus />
<button type="button" class="close dropdown-search-bar-right-close" aria-label="Clear Search">
<span aria-hidden="true">×</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Left-->
<div class="dropdown-search-bar-container">
<div class="dropdown-search-bar-left">
<div class="row">
<div class="col-xs-4">
<button id="search-toggle-left" class="text-search-accessible btn btn-default pull-right" title="Submit Search">
<i class="fa fa-search" title="Submit Search"></i><span class="sr-only">Toggle Search Bar</span>
</button>
<div class="search-bar-left">
<form action="#" method="post">
<label for="searchRecord-dropdown-left" class="sr-only">Search Record</label>
<input id="searchRecord-dropdown-left" type="text" id="searchtext" class="form-control"
placeholder="Search Record" autofocus />
<button type="button" class="close dropdown-search-bar-left-close" aria-label="Clear Search">
<span aria-hidden="true">×</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
Copy
<script>
$(document).ready(function () {
$("#search-toggle-right").click(function(){
$(".search-bar-right").slideToggle("slow");
});
$(".dropdown-search-bar-right-close").click(function(){
$(".search-bar-right").slideToggle("slow");
});
$("#search-toggle-left").click(function(){
$(".search-bar-left").slideToggle("slow");
});
$(".dropdown-search-bar-left-close").click(function(){
$(".search-bar-left").slideToggle("slow");
});
});
</script>
Copy