Table Search - adding 'no results' message

Question

I am currently using the below table search/filter script in a prototype I am building. User feedback suggests that I need a message when the search returns no matches.

I was wondering if someone could suggest a change that would show a no results message when a user searches for something not found on the table?

The idea is to display it only once as long as the string is not found. Once the search field is refreshed or altered the search/filter would begin again.

NOte: I have seen this same question asked but not with the code base I am using, and I am a user of script but do not fully understand the language, so I cannot apply the suggestions to my code.

Thanks

<script>
        $(document).ready(function()
        {
            $('#search').keyup(function()
            {
                searchTable($(this).val());
            });
        });
        function searchTable(inputVal)
        {
            var table = $('#tblData');
            table.find('tr').each(function(index, row)
            {
                var allCells = $(row).find('td');
                if(allCells.length > 0)
                {
                    var found = false;
                    allCells.each(function(index, td)


                    {
                        var regExp = new RegExp(inputVal, 'i');
                        if(regExp.test($(td).text()))
                        {
                            found = true;
                            return false;
                        }
                    });
                    if(found == true)$(row).show();else $(row).hide();
                }
            });
        }
    </script>

Answer 1

You could have a row that shows "no Results", and you can decide whether to show it or not when you find results. So you should store a variable, for example foundResults and at end, check it an decide whether to show it or not.

Something like this:

<script>
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });
    function searchTable(inputVal)
    {
        var table = $('#tblData');
        var foundResults = false;
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td) {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        foundResults = true;
                        return false;
                    }
                });
                if(found == true)$(row).show();else $(row).hide();
            }
        });
        if (foundResults) {
            $(".noresults").hide(); 
        } else {
            $(".noresults").show();
        }
    }
</script>