JSON简单实时搜索不起作用
[英]JSON simple live search not working
问题描述
我有一个简单的实时搜索设置，无法解决。 我是JSON的新手，但对html和jquery相当满意，但是我将在此处包括所有代码。 没有错误，输入时不会显示结果。 这是html首先：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>JSON live search</title>
<link rel="stylesheet" href="mystyle.css"/>
</head>
<body>
<div id="searcharea">
<label for="search">Live search</label>
<input type="search" name="search" id ="search" placeholder="start typing.." />
</div>
<div id="update"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
和js：
$.getJSON('data.json', function(data) {
var output = '<ul class="searchresults">';
$.each(data, function(key, val) {
output += '<li>';
output += '<h2>' + val.name + '</h2>';
output += '</li>';
});
output += '</ul'>;
$('#update').html(output);
});
我已经通过以下方式构造了JSON数据文件：
{
"businesses":[
{"name":"LJMU","contacts":[{"contacts":"con1"},{"contacts":"con2"},{"contacts":"con3"}]},
{"name":"Bobs bricks","contacts":[{"contacts":"con1"},{"contacts":"con2"},{"contacts":"con3"}]},
{"name":"Apple","contacts":[{"contacts":"con1"},{"contacts":"con2"},{"contacts":"con3"}]},
]
}
我知道这很痛苦，但是谁能说出为什么我没看到结果？
2 个解决方案
解决方案1
0 2014-04-17 16:14:44
不应该output += '<h2>' + val.name + '</h2>';
是
output += '<h2>' + val.businesses.name + '</h2>';
解决方案2
0 2014-04-17 16:17:57
您的json对象（ data ）包含一个属性businesses ，该businesses是数组。 因此您必须在$.each使用， $.each不是data ，而是data.businesses
$.getJSON('data.json', function(data) {
var output = '<ul class="searchresults">';
$.each(data.businesses, function(key, val) {
output += '<li>';
output += '<h2>' + val.name + '</h2>';
output += '</li>';
});
output += '</ul'>;
$('#update').html(output);
});
JSON和jQuery Live搜索
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.