Live Search Bar Click Result

I have a ‘live’ searchbar for name lookup using jquery, and i want to be able to click a name from the provided results. That name would then stay in the searchbar while a new textarea opens below. Any direction or help would be greatly appreciated. Code:

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search Bar</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
  </head>

  <body></body>

  <div class="container" style="width: 900px;">
    <h2 align="center">Alt telecom</h2>
    <h3 align="center">Client Data</h3>
    <br /><br />
    <div align="center">
      <input
        type="text"
        name="search"
        id="search"
        placeholder="Search Clients"
        class="form-control"
      />
    </div>
    <ul class="list-group" id="result"></ul>
    <br />
    <script>
      $(document).ready(function () {
        $.ajaxSetup({ cache: false });
        $("#search").keyup(function () {
          $("#result").html("");
          $("#state").val("");
          var searchField = $("#search").val();
          var expression = new RegExp(searchField, "i");
          $.getJSON("data.json", function (data) {
            $.each(data, function (key, value) {
              if (
                value.name.search(expression) != -1 ||
                value.location.search(expression) != -1
              ) {
                $("#result").append(
                  '<li class="list-group-item link-class">' +
                    value.name +
                    ' | <span class="text-muted">' +
                    value.location +
                    "</span></li>"
                );
              }
            });
          });
        });
      });
    </script>
  </div>
</html>

Right my mistake. I guess it won’t allow me to upload the json file either?

Yeah sure. You might notice there are images in the JSON but I’ve taken them out of the javaScript for now https://github.com/MarcelPenn/data.json/blob/master/data.json

Great thanks, I’ll try to figure something out from there.

Hey, so i’ve made the names clickable by wrapping them in anchor tags, and added a text-area to the html with display set to hidden, but have tried several ways to then hide all the other results and display only the name selected and the textarea when a name is clicked without any success for either. Any suggestions?

Current code:

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search Bar</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
  </head>

  <body>

  <div class="container" style="width: 900px;">
    <h2 align="center">Alt telecom</h2>
    <h3 align="center">Client Data</h3>
    <br /><br />
    <div align="center">
      <input
        type="text"
        name="search"
        id="search"
        placeholder="Search Clients"
        class="form-control"
      />
    </div>

    <ul class="list-group" id="result"></ul>
    <br />

    <textarea class="area" id="area"></textarea>

    </body>

    <script>
    
    $(document).ready(function () {
      $.ajaxSetup({ cache: false });
      $("#search").keyup(function () {
        $("#result").html("");
        $("#state").val("");
        var searchField = $("#search").val();
        var expression = new RegExp(searchField, "i");
        $.getJSON("data.json", function (data) {
          $.each(data, function (key, value) {
            if (
              value.name.search(expression) != -1 ||
              value.location.search(expression) != -1
            ) {
              $("#result").append(
                '<a href="#"><li class="list-group-item link-class">' +
                  value.name +
                  ' | <span class="text-muted">' +
                  value.location +
                  "</span></li></a>"
              );
            }
    
            //Isolate selected name and display text box
            if(document.getElementByClassName('area')=clicked) {
              document.getElementByClassName('area').style.display = block; 
            }
          });
        });
      });
    });
    
    </script>
  </div>
</html>