How to create a dashboard widget that searches for an Issue number?

[StevenM04883727]

Using the classic dashboard, how to create a dashboard widget that searches for an Issue number? Interactive filter doesn't seem to be able to filter on this string. 

I tried using content block with the attached script, but this doesn't seem to work.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:evaluate object="true">
        var session = gs.getSession();
    </g:evaluate>
    
    <script>
        // Initialize the handler with a unique ID
        var filterHandler = new DashboardMessageHandler("grc_string_search_filter");

        function sendFilter() {
            var text = document.getElementById('grc_search_input').value;
            var table = "sn_grc_issue"; // Target table
            var field = "Number"; // Target field
            
            if (text.length > 0) {
                // Publish the filter using 'LIKE' for partial string matching
                filterHandler.publishFilter(table, field + "LIKE" + text);
            } else {
                filterHandler.removeFilter();
            }
        }

        function clearFilter() {
            document.getElementById('grc_search_input').value = "";
            filterHandler.removeFilter();
        }
    </script>

    <div style="padding: 10px;">
        <label for="grc_search_input">Search Issue Description:</label>
        <div class="input-group">
            <input type="text" id="grc_search_input" class="form-control" placeholder="Type and click search..." />
            <span class="input-group-btn">
                <button class="btn btn-primary" onclick="sendFilter()">Search</button>
                <button class="btn btn-default" onclick="clearFilter()">Clear</button>
            </span>
        </div>
    </div>
</j:jelly>

Thanks in advance.