Add search to the glossary page

You might want to add a search box to your glossary page if your knowledge base has any of these situations:

• A lot of glossary terms
• Readers who frequently reference your glossary
• A link to your glossary in your table of contents

While there is no built-in setting for this in KnowledgeOwl, 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 collapses the glossary/letters or sections with no matches and highlights terms that match your search phrase in a color of your choice (we default to yellow).

Here it is in action with the default settings:

Sample gif showing the glossary search behavior you'll achieve. Hover to play.

Create the snippet and add it to your knowledge base

To add this search box to your glossary:

1. In the lefthand navigation, go to  Snippets. The Snippets page opens.
2. Select + Create New Snippet to create a new snippet. Refer to Create a snippet for more detailed instructions if you're unfamiliar with creating new snippets.
3. Enter a Snippet Name like Glossary Search.
4. Enter a Snippet Description, like This snippet adds a search box to the glossary.
5. Select the Snippet Content dropdown and select the Code Editor:
   gif showing the Code Editor selection. Hover over to play.
6. Copy the code below and paste it into the Code Editor:

   <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, select Create to finalize and save your snippet.
8. Once your snippet is created, copy the snippet Merge Code Value.
9. Now go to Customize > Style (HTML & CSS).
10. In the Customize HTML, CSS, and JS section, select Custom HTML.
11. Select Body from the Select HTML section to edit dropdown.
12. Paste your merge code in at the bottom of your Custom HTML Body (or between scripts).
13. Be sure to Save your changes.

You should now have a search box on your glossary page!

Make it yours

Once the snippet is working, make changes to the snippet to adjust the style. Here are some of the most common changes.

Change the placeholder text

We use "Search glossary" as the search box placeholder.

To change it, edit placeholder="Search glossary" in row 4:

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

For example, this code will update the placeholder text to be "Start typing to search glossary":

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

Change the highlight color

The script uses a highlight color of yellow. To change this color, in the style section at row 41, replace the background-color for .highlight with a color of your choice. You can use a named browser color, a hex code, or an RGB value.

For example, this code will update the highlight background color from yellow to green.

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

Change the style of the search box

Change the height, font-size, width, etc. by updating the appropriate values in the style section's #glossary-search styles, rows 31-37:

<style>
  /* Style the search box */
  #glossary-search {
    height: 28px;
    font-size: 14px;
    float: right;
    width: 300px;
    padding: 2px;
  }