表搜索 - 添加'没有结果'消息

时间:2016-11-21 17:39:19

标签: javascript search

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

我想知道当用户搜索桌面上找不到的内容时,是否有人可以建议更改会显示无结果消息?

想法是只要找不到字符串就只显示一次。刷新或更改搜索字段后,搜索/过滤器将重新开始。

NOte:我已经看到了同样的问题,但没有使用我正在使用的代码库,而且我是脚本的用户,但不完全理解该语言,所以我无法将这些建议应用到我的代码中。

由于

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

1 个答案:

答案 0 :(得分:1)

您可以有一行显示&#34;没有结果&#34;,您可以在找到结果时决定是否显示。所以你应该存储一个变量,例如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>
相关问题