如何使用json进行搜索并在html中显示所选项目详细信息？

Question

我有一个名为default.json的json文件。在搜索项目名称或搜索字段中的项目ID中。选定的结果表单搜索框应显示项目详细信息并获取选定的侧栏项目名称。

这是json中显示的结果：

    "projects": [
    {
        "instances": null,
        "name": "decodingideas",
        "projectid": "decodingideas-147616",
        "projectnumber": 334691107943,
        "orgid": "",
        "orgname": "",
        "parentid": "",
        "parenttype": ""
    },
    {
        "instances": null,
        "name": "pupil-workers",
        "projectid": "pupil-workers",
        "projectnumber": 455648594684,
        "orgid": "",
        "orgname": "",
        "parentid": "",
        "parenttype": ""
    },

搜索框html代码：

  <nav class="navbar navbar-dark sticky-top flex-md-nowrap p-0" 
  style="background-color:#3B78E7">
  <a class="navbar-brand col-sm-3 col-md-2 mr-0"  href="#">GCP Projects</a>
  <input class="form-control form-control-dark w-100" type="text" 
placeholder="Search" aria-label="Search">
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="#">Sign out</a>
    </li>
  </ul>
</nav>

以下是我需要的屏幕截图：     

这是屏幕截图2

Answer 1

您可以使用Lodash。它易于使用，非常有用。