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

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

转载作者：行者123 更新时间：2023-11-28 02:47:28

24

4

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

24

4

0

文章推荐： c++ - 在 C++ 中获取指向调用对象的指针

文章推荐： javascript - 逐行验证

文章推荐： c++ - 获取当前用户的所有进程

文章推荐： javascript - 在 html 输入字段中激活 android 上的密码键盘

C++ 对象创建时没有使用 new 关键字，但在构造函数中使用了 new 关键字
如果我创建一个对象时没有使用 new 关键字，例如“Object s(someval)”，但该对象的构造函数使用了 new，当该对象超出范围时，是否会调用析构函数为其分配新的空间？我感觉好像是，但我不
Sql ONLY 关键字
在 SQL 语法中，我发现奇怪的规则表明 select * from ONLY (t1)是有效的 SQL。我的问题是:什么是 ONLY在这种情况下是什么意思？它在规范的“7.6 table ref
jQuery $(this) 关键字
为什么使用 $(this) 而不是重新选择类很重要？我在代码中使用了大量的动画和 CSS 编辑，并且我知道可以使用 $(this) 来简化它。最佳答案当您通过 jQuery 执行 DOM 查询(
Mysql IN 关键字
我正在尝试使用 IN 关键字编写查询。表A 属性标识、属性名称表B key 、属性标识、属性值根据提供的 key ，我想返回所有 attrName、attrVal 组合。结果将包含两个表中的列。
MySQL AS 关键字
这个问题在这里已经有了答案: Why would you use "AS" when aliasing a SQL table? (8 个答案) 关闭 9 年前。我不擅长写查询，但是从我开始使用
java this 关键字
我读过，在 Java 中，您不必将 this 关键字显式绑定(bind)到对象，它由解释器完成。它与 Javascript 相反，在 Javascript 中你总是必须知道 this 的值。但是 Ja
Swift "with"关键字
Swift 中“with”关键字的用途是什么？到目前为止，我发现如果您需要覆盖现有的全局函数，例如 toDebugString，可以使用该关键字。 // without "with" you
C# where 关键字
这个问题在这里已经有了答案: What does the keyword "where" in a class declaration do? (7 个答案) 关闭 9 年前。在下面的一段代码中(
Swift "where"关键字
免责声明:swift 菜鸟您好，我刚刚开始学习 Swift，正在学习 Swift 编程语言(Apple 在 WWDC 期间发布的书籍)，并且想知道“where”关键字是什么。它用于 let vege
去 "this"-关键字
深入研究文档后，我找不到以下问题的答案: 是否有任何理由反对使用 this 来引用当前对象，如下例所示？ type MyStruct struct { someField string } fun
PHP面向对象学习之parent::关键字
前言最近在做THINKPHP开发项目中，用到了 parent:: 关键字，实际上 parent::关键字是PHP中常要用到的一个功能，这不仅仅是在 THINKPHP 项目开发中，即使是一个小型
详谈signed 关键字
我们都知道且经常用到 unsigned 关键字，但有没有想过，与此对应的 signed 关键字有啥用？复制代码代码如下: int i = 0; signed
彻底理解Java中this 关键字
this关键字再java里面是一个我认为非常不好理解的概念，：）也许是太笨的原因 this 关键字的含义：可为以调用了其方法的那个对象生成相应的句柄。怎么理解这段话呢？ thinking i
初识 synchronized 关键字
一什么是 synchronized synchronized 关键字提供了一种锁机制，能够确保共享变量互斥访问，从而防止数据不一致问题的出现。 synchronized 关键字包括 monitor
深入解析 synchronized 关键字
最近看了几篇 synchronized 关键字的相关文章，收获很大，想着总结一下该关键字的相关内容。 1、synchronized 的作用原子性：所谓原子性就是指一个操作或者多个操作，要么全部执行并
JavaScript 方法和 this 关键字
在本教程中，您将借助示例了解 JavaScript 对象方法和 this 关键字。在 JavaScript 中，对象也可以包含函数。例如， // object containing meth
PHP "with"关键字 - "with"有什么作用？
有人可以解释一下 PHP“with”的作用吗？示例开始: 假设我有一个类: \App\fa_batch 这句话有什么区别: $w = (with (new \App\fa_batch))
typescript - 显式类型注释与 "as"关键字
这个问题在这里已经有了答案: What is the difference between using the colon and as syntax for declaring type? (2
tsql - IN 关键字与 OR 关键字
如果我在 WHERE 子句中使用以下任一项，是否会有很大不同: WHERE [Process Code] = 1 AND ([Material ID] = 'PLT' OR [Material ID]
sql - 关键字 'PROCEDURE'附近的语法不正确
This question is unlikely to help any future visitors; it is only relevant to a small geographic are

首页

博学

6Ren·AI

商城

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