By Simon Clough VTLE Developer, The Radclyffe School

The problem

Our science forum is used quite frequently, with a lot of new threads being created.  This meant the page was getting longer and becoming harder to find out if a question had already been asked or answered. So we approached it by adding a live search box that shows and hides rows in the table based on whether or not the search term is contained within with thread title. This was added so both students and staff could find the answers to questions and find relevant threads more quickly, and without the need to look through the full list.

Our solution

The way it’s done is by adding a HTML widget just above the forum, and adding the following HTML tag:

<input type="text" class="trs-rad-sc-forum-search" placeholder="Search the Forum">

Then at the bottom of the page another HTML widget is added containing the jQuery needed for the functionality: 
 

<script>
// div widget UUID that contains the forum
var forumUUID = 'CE6D1DEA2001B54829C86FEFC6B5DE0B4883B28C614F8F91';
 
$('.trs-rad-sc-forum-search').on('keyup', function(){
        
    var searchTerm = $(this).val().toLowerCase();
        
    $('div[data-uuid="' + forumUUID + '"] .forum_widget table .title').each(function(){
        if ($(this).text().toLowerCase().indexOf(searchTerm) > -1 || searchTerm.length < 1) {
            $(this).parent('tr').show();
        } else {
            $(this).parent('tr').hide();
        }
    });
    
    $('div[data-uuid="' + forumUUID + '"] .forum_widget table tr:first').show();
                
});
</script>

We’re happy for this code to be shared with other schools and all you have to do to get this working with  your own platform, you only need to change the forumUUID variable to match the forum they’re using it with.
 

Frog says

We love schools using our platform in different and interesting ways.  If you have your own code you'd like to share, drop a line to Graham Quince or visit the Code Snippets area on our forums.