Add search to the glossary page

You can add a search box to your glossary page with a little html, css, and javascript. As you type, this script will highlighting matching words in your glossary terms and definitions, hiding the terms without matches.

Copy and paste this JavaScript to the bottom of Settings> Style > HTML Body.

<script>
$(function(){

//Glossary
if($('.hg-glossary-page') && $('.hg-glossary-page').length >= 1){
$('.page-header').append('<input type="text" id="glossary-search" placeholder="Search glossary">');
$('input[id=glossary-search]').keyup(function()
{
$('.glossary-term').removeHighlight();
var term = $(this).val().toLowerCase();
$('.glossary-term').each(function()
{
if ($(this).text().toLowerCase().indexOf(term) > -1)
{
$(this).show().highlight(term);
}
else
{
$(this).hide();
}
});
});
}
});
</script>
<script src="//dyzz9obi78pm5.cloudfront.net/app/image/id/56fa0cfd91121cd0337b6d9d/n/jquery.highlight-5"></script>

Copy and paste this CSS into Settings > Style > Custom CSS:

#glossary-search {
height: 28px;
font-size: 14px;
float: right;
width: 300px;
padding: 2px;
}

.highlight { 
background-color: yellow 
}