如何使用JSON和JQuery修复Live搜索中的else语句?

时间:2019-04-06 12:49:28

标签: jquery json

我有一个使用JSON和JQuery进行实时搜索的代码。 它从JSON文件中搜索信息,如果搜索词不在数据中,我需要添加else语句并显示一条消息。

我添加了else语句,但它提供的消息与JSON数据中的条目总数一样多。

<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript">
    $('#search').keyup(function() {
        var searchTerm = $(this).val();
        var myExp = new RegExp(searchTerm, "i");
        $.getJSON('data.json', function(data) {
            var output = "<ul>";
            $.each(data, function(key, val) {
                    if (val.name.search(myExp) != -1) {
                        output += '<li>';
                        output += ' ' + val.name + ' ';
                        output += '</li>';
                    } else {
                        output += '<li>';
                        output += ' no data ';
                        output += '</li>';
                    }
                }

            });

        output += "</ul>"; $('#update').html(output);
        });
    });
</script>

数据文件:

[{"name":"hello"},{"hello 2"},{"hello 3"}]

当我键入不在数据中的“世界”时,它会显示3次“无数据”消息(我在数据中有多少个条目)。

1 个答案:

答案 0 :(得分:3)

第一个问题是您的JavaScript代码无效。还有一个额外的}。我删除了第二个也是主要的问题是,您向JSON数据中查找的每个条目(如果搜索词匹配)添加“ no data”消息以输出。因此,请尝试以下代码:

$('#search').keyup(function() {
    var searchTerm = $(this).val(),
        myExp = new RegExp(searchTerm, 'i');
    $.getJSON('data.json', function(data) {
        var found = false,
            output = '<ul>';
        $.each(data, function(key, val) {
            if (val.name.search(myExp) != -1) {
                found = true;
                output += '<li>';
                output += ' ' + val.name + ' ';
                output += '</li>';
            }
        });
        output = found ? output : (output + '<li> no data </li>');
        output += '</ul>';
        $('#update').html(output);
    });
});