我有一个使用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次“无数据”消息(我在数据中有多少个条目)。
答案 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);
});
});