javascript - 表搜索 - 添加 'no results' 消息

Question

我目前正在构建的原型(prototype)中使用下表搜索/过滤器脚本。用户反馈表明，当搜索未返回匹配项时，我需要一条消息。

我想知道是否有人可以建议进行更改，当用户搜索表中未找到的内容时显示无结果消息？

这个想法是只要没有找到字符串就只显示一次。刷新或更改搜索字段后，搜索/过滤器将再次开始。

注意:我已经看到有人问同样的问题，但我正在使用的代码库没有提出这个问题，而且我是脚本的用户，但并不完全理解该语言，因此我无法将这些建议应用到我的代码中。

谢谢

<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

您可以有一行显示“无结果”，并且您可以在找到结果时决定是否显示它。因此，您应该存储一个变量，例如 foundResults 并在最后检查它并决定是否显示它。

类似这样的事情:

<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>