我想用 JSON 文件制作一个迷你字典。我通过观看 Youtube 上的教程来完成我的代码。它在那个带有代码的视频中有效，但在我的电脑中不起作用。我的代码有什么问题？请指导我。
这是我的data.json
[
{
"id":"1",
"scientific":"Orchidaceae",
"varnicular":"Thit Khwa",
"family":"red",
"order":"red",
"kingdom":"red",
"english":"Orchid"
},
{
"id":"2",
"scientific":"test",
"varnicular":"test",
"family":"test",
"order":"test",
"kingdom":"test",
"english":"test"
},
{
"id":"3",
"scientific":"test2",
"varnicular":"test2",
"family":"test2",
"order":"test2",
"kingdom":"test2",
"english":"test2"
},
{
"id":"4",
"scientific":"test3",
"varnicular":"test3",
"family":"test3",
"order":"test3",
"kingdom":"test3",
"english":"test3"
},
{
"id":"5",
"scientific":"test4",
"varnicular":"test4",
"family":"test4",
"order":"test4",
"kingdom":"test4",
"english":"test4"
},
{
"id":"6",
"scientific":"test5",
"varnicular":"test5",
"family":"test5",
"order":"test5",
"kingdom":"test5",
"english":"test5"
},
{
"id":"7",
"scientific":"test6",
"varnicular":"test6",
"family":"test6",
"order":"test6",
"kingdom":"test6",
"english":"test6"
}
]
这是我的index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p><br/><br/></p>
<div class="container">
<input type="search" class="form-control" id="search" /><br/>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Scientific Name</th>
<th>English Name</th>
<th>Varnicular Name</th>
<th>Family</th>
<th>Order</th>
<th>Kingdom</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
s('#search').keydown(function(){
s.getJSON("data.json",function(data){
var search = s('#search').val();
var regex = new RegExp(search, 'i');
var output;
$.each(data, function(key, val){
if((val.scientific.search(regex)) != -1 || (val.english.search(regex)) != -1 || (val.varnicular.search(regex)) != -1){
output += "<tr>";
output += "<td id='"+key+"'>"+val.id+"</td>";
output += "<td id='"+key+"'>"+val.scientific+"</td>";
output += "<td id='"+key+"'>"+val.english+"</td>";
output += "<td id='"+key+"'>"+val.varnicular+"</td>";
output += "<td id='"+key+"'>"+val.family+"</td>";
output += "<td id='"+key+"'>"+val.order+"</td>";
output += "<td id='"+key+"'>"+val.kingdom+"</td>";
output += "</tr>";
}
});
$('tbody').html(output);
});
})
</script>
</body>
</html>
最佳答案
抱歉浪费了你们的时间。我发现了我的错误。我用 s 而不是 $
编码错误我在这里修改了我的代码
$('#search').keydown(function(){
$.getJSON("data.json",function(data){
var search = $('#search').val();
var regex = new RegExp(search, 'i');
var output;
$.each(data, function(key, val){
关于html - 使用关键字从 data.json 文件中搜索数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40926568/