Question

我想用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>

Answer 1

抱歉浪费你的时间。我发现了我的错误。我用 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){

Answer 2

更改所有＆＃34; c（＆＃34;到＆＃34; $（＆＃34;在您的代码中。

编辑：和＆＃34; c。＆＃34;到＆＃34; $。＆＃34;太

使用关键字从data.json文件中搜索数据

2 个答案: