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>

We can not test your code as we do not have access to data.json.

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

Can you post a link to the json file if it is available online?

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

Well you will need to first make the name clickable and then when it is clicked, you will need to replace the value in the input element as the name clicked. Then, you will need to either create a textarea and display it or unhide an existing textarea.

Try to make the name clickable first. There are numerous approaches to dothis, so just pick one and go with it.

1 Like

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>