Javascript 如何从json中搜索文本并以html显示？

我列出了json结果中的项目名称，并显示在侧栏中。当单击侧栏列出任何项目名称时，它会显示项目名称的详细信息。现在我有了搜索框来搜索项目，显示项目详细信息，并在侧栏中获取所选项目名称

以下是搜索框代码：

   <input class="form-control form-control-dark w-100" type="text" id="text" placeholder="Search" aria-label="Search">

在这里，我将搜索projectid、名称或实例等

以下是html中使用的代码：

 <div class="container-fluid">
  <div class="row">
  <nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div id="projectlist" class="sidebar-sticky">
    <ul class="nav flex-column nav-pills">

      {{range .Projects}}
      <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">

          <img class="img-fluid" style="width:8%" 
  src="static/image/generic_gcp.png">
          {{.Name}}

          <div>
            <small>
            ProjectId: {{.ProjectID}}
          </small>
          </div>
        </a>
        </li>
        {{end}}

    </ul>

 <!-- Might need this seperator
    <h6 class="sidebar-heading d-flex justify-content-between align-items- 
 center px-3 mt-4 mb-1 text-muted">
      <span>Savings Reports</span>
    </h6>
  -->
  </div>
</nav>
   <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  {{range .Projects}}

  <div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
 flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
    <h1 class="h2">Project:{{.Name}}</h1>

---

如何列出搜索和显示项目详细信息并在该项目名称的侧栏中被选中。

这里是从Jquery ui自动完成的：

$function{ var项目=[ { 实例：null， 名称：decodingideas， Projectd:decodingideas-147616， 项目编号：334691107943， 机构：， 机构名称：， 父ID:， 父类型： }, { 实例：null， 姓名：学生工作者， 项目D：学生工人， 项目编号：455648594684， 机构：， 机构名称：， 父ID:， 父类型： } ]; $projects.autocomplete{ 来源：函数请求、响应{ 响应$.mapprojects，函数值，键{ 返回{ 标签：value.name++value.projectid， value:value.projectd } }; }, 选择：functionevent，ui{ var res=$'projects'.valui.item.projectid； } }; } ;

---

搜索：你是说你想自动完成还是键入搜索并显示结果？我需要两个数据，你想从json自动完成显示哪些数据？你如何威胁搜索结果？只挑最好的？显示结果列表，然后从中选择？也许您想一次显示所有匹配的项目？@名称和projectid，实例如何在不从json声明var项目的情况下显示结果。我的json文件名default.json？您必须使用ajaxHow加载本地json文件尝试在url中写入json文件位置如何使用此代码$function{$.ajax{url:/path/to/cache.json，数据类型：json，数据：{term:request.term}，成功：functiondata{var cat_data=$.mapdata，functionitem{return{label:item.label，category:item.category，desc:item.desc}；}；$searchfield.catcomplete{延迟：0，源：cat_数据，minlength:0}；}；}；

 <div class="container-fluid">
  <div class="row">
  <nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div id="projectlist" class="sidebar-sticky">
    <ul class="nav flex-column nav-pills">

      {{range .Projects}}
      <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">

          <img class="img-fluid" style="width:8%" 
  src="static/image/generic_gcp.png">
          {{.Name}}

          <div>
            <small>
            ProjectId: {{.ProjectID}}
          </small>
          </div>
        </a>
        </li>
        {{end}}

    </ul>

 <!-- Might need this seperator
    <h6 class="sidebar-heading d-flex justify-content-between align-items- 
 center px-3 mt-4 mb-1 text-muted">
      <span>Savings Reports</span>
    </h6>
  -->
  </div>
</nav>
   <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  {{range .Projects}}

  <div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
 flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
    <h1 class="h2">Project:{{.Name}}</h1>