使用關鍵字從data.json文件中搜索數據

我想用JSON文件製作迷你字典。我通過觀看Youtube的教程來完成我的代碼。這是與該代碼的視頻工作，但它不能在我的電腦上工作。我的代碼有什麼問題？請指導我。使用關鍵字從data.json文件中搜索數據

這裏是我的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>

來源

2016-12-02 Kawazoe Kazuke

對不起，浪費您的時間傢伙。我發現我的錯誤。我是編碼錯小號，而不是$

我改變了我的代碼在這裏

$('#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){

來源

2016-12-02 07:11:12

改變所有「C（」到「$（」在你的代碼。

編輯：和「c。」到「$

來源

2016-12-02 07:13:01 Kainax

使用關鍵字從data.json文件中搜索數據

回答

相關問題