Add search to the glossary page

You might want to add a search box to your glossary page if you:

• Have a lot of glossary terms
• Have readers who frequently reference your glossary
• and/or have a link to your glossary in your table of contents

We've worked up a code snippet that:

• Creates a search box at the top of the Glossary with "Search glossary" placeholder text
• As you type to search, it will collapse glossary letters/sections with no matches and highlight terms that match your search phrase in yellow (you can change this color)

Here it is in action with the default settings:

Create the snippet and add it to your knowledge base

To add this search box to your glossary:

1. Go to Library > Snippets.
2. Click the + Create New Snippet button.
   
3. This will open a Snippet details screen. Give your snippet a Name, like "Glossary Search".
4. Give your snippet a Description, like "This snippet adds a search box to the glossary."
5. In the Snippet Content section, click the dropdown to select the Code Editor.
6. Copy the code below and paste it into the Code Editor window.

   <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>
   
   
   <style>
     /* Style the search box */
     #glossary-search {
       height: 28px;
       font-size: 14px;
       float: right;
       width: 300px;
       padding: 2px;
     }
     
     /* Highlight color for search term matches */
     .highlight { 
       background-color: yellow;
     }
   </style>

7. Once you're done, click the Create button in the upper right.
8. So a completed snippet might look like this:
   
9. Once your snippet is created, copy the snippet Merge Code Value.
10. Go to Settings > Style.
11. Below the preview pane, click on Custom HTML and be sure the Body is selected.
12. Paste your merge code in at the bottom of your Custom HTML Body (or between scripts), and save.
13. You should now have a search box on your glossary page!

Common tweaks

Once the snippet is working, you can make changes to the snippet to adjust the style:

• Change the placeholder text: In row 4 (the first script at the top):

  $('.page-header').append('<input type="text" id="glossary-search" placeholder="Search glossary">');

  
  Replace "Search glossary" with the placeholder text you'd like to use, for example:

  $('.page-header').append('<input type="text" id="glossary-search" placeholder="Start typing to search glossary...">');

• Change the highlight color: in the style section, at row 41, replace the .highlight background-colorwith a color of your choice, for example:

  /* Highlight color for search term matches */
    .highlight { 
      background-color: #80bd01;
    }

• Change the style of the search box: you can change the height, font-size, width, etc. by updating the appropriate values in the style section's #glossary-search styles.