Search
Basic search box
Code
<div class="cui search-box">
<label for="{{ Input id }}" class="sr-only">Search</label>
<input id="{{ Input id }}" name="{{ Input name }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>Search box with mobile modal
This variant has a different experience for smaller mobile screens (576px or less wide). For the smaller screens, a faux search box is displayed. When tapping this faux search box, a modal will open up with the real search box field.
This variant was designed to allow the user to focus on their search task on a mobile device. By opening the real search box in the modal, the user is given more real estate to type in the input box. See the header pattern page for examples on how this variant is used.
Resize your window to see this in action.
Code
<script src="jquery-3.5.1.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.4.1/util.js"></script>
<script src="bootstrap/4.4.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.4.1/bootstrap.js"></script>
<!-- Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box d-none d-sm-block">
<label for="{{ Input id }}" class="sr-only">Search</label>
<input id="{{ Input id }}" name="{{ Input name }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<button class="cui search-box d-block d-sm-none" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
<span class="form-control search-box-input"></span>
<span class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</span>
</button>
<!-- Part 3. Modal, activated by the mobile faux search box -->
<div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
<div class="modal-dialog modal-fs-mobile" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 id="modal-search-title" class="modal-title">Search</h2>
<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<div class="cui search-box">
<label for="{{ Modal input id }}" class="sr-only">Search</label>
<input id="{{ Modal input id }}" name="{{ Input name }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Add script to footer to focus on search field when modal is opened -->
<script type="text/javascript">var searchModalId = "<?= 1 ?>";</script>
<script>
$(document).ready(function() {
const searchMobile = document.getElementById('search-field-modal-' + searchModalId);
//Focus on search input when mobile modal opens
const mobileSearchModal = document.getElementById('modal-search-' + searchModalId);
$(mobileSearchModal).on('shown.bs.modal', function () {
searchMobile.focus();
})
});
</script>
You can also have it animated to slide down and up.
Code
<script src="jquery-3.5.1.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.4.1/util.js"></script>
<script src="bootstrap/4.4.1/modal.js"></script>
<!-- Animation scripts for slide and fade ins -->ß
<script src="../js/coc.animations.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.4.1/bootstrap.js"></script>
<!-- Animation scripts for slide and fade ins -->
<script src="../js/coc.animations.js"></script>
<!-- Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box d-none d-sm-block">
<label for="{{ Input id }}" class="sr-only">Search</label>
<input id="{{ Input id }}" name="{{ Input name }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<!-- Add the 'animate__search-box' class will make the modal window animation to slide down and up -->
<button class="cui search-box animate__search-box d-block d-sm-none" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
<span class="form-control search-box-input"></span>
<span class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</span>
</button>
<!-- Part 3. Modal, activated by the mobile faux search box -->
<div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
<div class="modal-dialog modal-fs-mobile" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 id="modal-search-title" class="modal-title">Search</h2>
<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<div class="cui search-box">
<label for="{{ Modal input id }}" class="sr-only">Search</label>
<input id="{{ Modal input id }}" name="{{ Input name }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Add script to footer to focus on search field when modal is opened -->
<script type="text/javascript">var searchModalId = "<?= 2 ?>";</script>
<script>
$(document).ready(function() {
const searchMobile = document.getElementById('search-field-modal-' + searchModalId);
//Focus on search input when mobile modal opens
const mobileSearchModal = document.getElementById('modal-search-' + searchModalId);
$(mobileSearchModal).on('shown.bs.modal', function () {
searchMobile.focus();
})
});
</script>
Search box with search suggestions
The search suggestions that appears when a user triggers the search interaction
Code
<script>
$(document).ready(function() {
// JS to toggle search
$('.search-box-input').click( function() {
$('.toggled-search').slideDown(200) ;
});
$('.search-toggle-btn').click( function() {
$('.toggled-search').slideUp(200);
});
// hide the 'search suggestion' div with esc key
$( document ).on( 'keydown', function ( e ) {3
if ( e.keyCode === 27 ) {
$('.toggled-search').hide();
}
});
});
</script>
<div class="cui search-container">
<div class="cui search-box">
<label for="{{ Input id }}" class="sr-only">Search</label>
<input id="{{ Input id }}" name="{{ Input id }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<div class="toggled-search bg-medium" style="display:none;">
<div class="toggle-search-body">
<button class="cui btn-sm primary-text search-toggle-btn">Close</button>
<h3 class="text-large mt-md mb-xs">Search suggestions</h3>
<!--Add the suggestion links-->
<a class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</a>
<a class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</a>
</div>
</div>
</div>Sub-search
This sub search pattern can be used for page-level search.
The search bar will fill to 100% width of its container; therefore, it is best to wrap it inside a container with a reasonable width. In the example below, the width is controlled by placing it inside the Bootstrap grid.
Code
<!-- The Bootstrap grid can be used to handle the width of the sub-search bar. -->
<!-- Customize the column classes for your scenario -->
<div class="row">
<div class="col-sm-9 col-md-8 col-lg-6">
<!-- Sub-search bar -->
<label for="{{ Input id }}">Search</label>
<div class="cui input-group">
<input id="{{ Input id }}" name="{{ Input name }}" type="search" class="form-control">
<button class="cui btn-md primary sub-search-btn" id="submit">
<span class="btn-wrapper">
<span class="btn-text">Go</span>
</span>
</button>
</div>
</div>
</div>Search image block with key message
Code
<div class="search-image-block-container animate__animated animate__fadeIn {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }}" style="background-image: url( '{{ Backup Image URL (e.g. image.jpg) }}' );">
<div class="comp-body">
<div class="key-message-container {{ text-right | text-left }} animate__animated animate__delay-300ms {{ animate__fadeInRight | animate__fadeInLeft }}">
<p class="bg-red">
{{ message }}
<br>
{{ message }}
</p>
</div>
<!--search component-->
<!-- The 'search-container' div is the required div -->
<div class="cui search-container">
<div class="cui search-box d-none d-sm-block">
...
</div>
<div class="toggled-search bg-medium" style="display:none;">
<div class="toggle-search-body">
...
</div>
</div>
<button class="cui search-box animate__search-box d-block d-sm-none" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
...
</button>
</div>
<!--search component end-->
</div>
</div>