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

Question

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

这是搜索框代码:

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

这里是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": ""
}

这里我将搜索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>

如何列出搜索和显示元素详细信息，并在该元素名称的侧边栏中进行选择。

Answer 1

这是 Jquery ui 的自动完成:

  $( function() {
 var 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": ""
}
];
    $( "#projects" ).autocomplete({
      source: function (request, response) {
           response($.map(projects, function (value, key) {
                return {
                    label: value.name+" "+ value.projectid,
                    value: value.projectid
                }
            }));
        
    }, 
      select: function(event, ui) {
           var res= $('#projects').val(ui.item.projectid);
           }
    });
  } );

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 SEarch: <input id="projects">

如果你想要 ajax 源代码:

    var url="";//your url to json file
    source: function(request,response)  
    { 
      $.get(url, function(data)
      {         
        obj = JSON.parse(data);   //parse the data in JSON (if not already)
        response($.map(obj, function(value, key)
        {
         return {
                        label: value.name+" "+ value.projectid,
                        value: value.projectid
                    }
        }));
    }
}