Question

我的JQuery代码没有过滤或搜索JSON数组，但是，它与w3schools上的代码几乎相同。但是我没有任何错误。有办法使它起作用吗？

我需要它来搜索JSON数组并返回值。

////////////////////////////////////////////

JSON：

[
 {
   "ID": 1,
   "Station": "Carmichael Rd.",
   "Address": "54 Myers Rd.",
   "Monthly_CStore_Sales": "120,000",
   "Operator": "Michael Sears",
   "Top_SKU": "Hotdogs"
 },
 {
   "ID": 2,
   "Station": "Baillou Hill",
   "Address": "564 Jackson Ave.",
   "Monthly_CStore_Sales": "89000",
   "Operator": "Sarah Pikes",
   "Top_SKU": "Patties"
 },
 {
   "ID": 3,
   "Station": "Oakesfield",
   "Address": "42 Peterson St.",
   "Monthly_CStore_Sales": "150000",
   "Operator": "Yolanda Gray",
   "Top_SKU": "Chicken"
 },
 ]

HTML：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
        <body>
         <p><br></br></p>
          <div class="container">
          <input type="search" class="form-control" id="search"></div></br>
          <table class="table table-striped table-bordered table-hover"></table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Station</th>
                <th>Address</th>
                <th>Monthly_CStore_Sales</th>
                <th>Operator</th>
                <th>Top_SKU</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
    </body>
    </html>

JavaScript：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

      <script>
        $('#search').keydown(function(){
          $.getJSON("smallData.json",function(data){
            var search = $('#search').val();
            var regex = new RegExp(search,'i');
            var output;
            $.each(data, function(key, val){
            if((val.ID.toString().search(regex) != -1)  || (val.Station.toString().search(regex) != -1)){
                output += "<tr>";
                output += "<td id='"+key+"'>"+val.ID+"</td>";
                output += "<td id='"+key+"'>"+val.Station+"</td>";
                output += "<td id='"+key+"'>"+val.Address+"</td>";
                output += "<td id='"+key+"'>"+val.Monthly_CStore_Sales+"</td>";
                output += "<td id='"+key+"'>"+val.Top_SKU+"</td>";
                output += "</tr>";
              }
            });
            $('tbody').html(output);
            });
          })

      </script>

JSON数组未过滤或搜索，但没有错误消息

0 个答案: