title: How to search project name/id from local JSON in html?
body: <p>Listing all project name and project id in side bar. You can see screen-1, how i am listing project.</p>
  
  <p><a href="https://i.stack.imgur.com/qyto7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qyto7.png" alt="enter image description here"></a></p>
  
  <p>Here project name and project id are loaded from local default.json. Now In search box, searching project id or project name. It list search result of project. You can see screen-2 screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/GciJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GciJJ.png" alt="enter image description here"></a></p>
  
  <p>Currently , I can able search text in search by giving static json response value in javascript. Here is the code which, I have tried of it.</p>
  
  <pre><code>  &lt;script&gt;
              $( 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);
  
                }
          });
        } );
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the search box html code:</p>
  
  <pre><code>&lt;input id="projects" class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"&gt;
  </code></pre>
  
  <p>Side bar project list html code:</p>
  
  <pre><code>  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;nav class="col-md-2 d-none d-md-block bg-light sidebar"&gt;
        &lt;div id="projectlist" class="sidebar-sticky" onclick="ClearFunction()"&gt;
          &lt;ul class="nav flex-column nav-pills"&gt;
  
            {{range .Projects}}
            &lt;li class="nav-item" &gt;
              &lt;a name="{{.ProjectID}}" class="nav-link" href="#"&gt;
  
                &lt;img class="img-fluid" style="width:8%" 
   src="static/image/generic_gcp.png"&gt;
                {{.Name}}
  
                &lt;div&gt;
                  &lt;small&gt;
                  ProjectId: {{.ProjectID}}
                &lt;/small&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;/li&gt;
              {{end}}
  
          &lt;/ul&gt;
  
   &lt;!-- Might need this seperator
          &lt;h6 class="sidebar-heading d-flex justify-content-between align-items- 
   center px-3 mt-4 mb-1 text-muted"&gt;
            &lt;span&gt;Savings Reports&lt;/span&gt;
          &lt;/h6&gt;
        --&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"&gt;
        {{range .Projects}}
  
        &lt;div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
   flex-md-nowrap align-items-center pb-2 mb-3 border-bottom right-content"&gt;
  
          &lt;h1 class="h2"&gt;Project:{{.Name}}&lt;/h1&gt;
  </code></pre>
  
  <p>Selected static value json response in search box is not selecting in side bar and not showing details of thst selected project.</p>
  
  <p>This is was getting right now: <a href="https://i.stack.imgur.com/gjE83.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gjE83.png" alt="enter image description here"></a></p>
  
  <p>What exactly i need is this</p>
  
  <p><a href="https://i.stack.imgur.com/JNghS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JNghS.png" alt="enter image description here"></a></p>
  
  <p>Can anyone help me out of this!!</p>