How to search text from json and display in html?

Question

I am listing project name from json result and display in side bar. When click on side bar listed any of project name it shows the details of it. Now i have search box to search projects and display project details and get selected project name in side bar.

here is the search box code :

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

here is the result of 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": ""
}

Here i will be searching projectid, name or instance, etc.

here is the code used in 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>

How can list search and display project details and get selected in side bar of that project name.

Answer 1

Here is auto complete from 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"> 

If you want source with 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 } })); } }