Results in ajax live search not visible although these exist

Question

I have the below code and trying to get some results in an ajax live search

$(document).ready(function() {
  $("#search").keyup(function() {
    var query = $(this).val();
    if (query != "" && query.length >= 3) {
      var csv = $.ajax('csv-files/clothesshoesaccesories.csv');
      var foundedstrings = "";
      csv.done(function(data) {
        var row = data.split('\n');
        for (var i = 0; i < row.length; i++) {
          var column = row[i].split('|');
          var descTosearch = column[2];
          var href = column[column.length - 1]
          if (descTosearch.includes(query)) {
            foundedstrings = foundedstrings + '<p><a href="' + href + '"></a></p>';
            $('#output').html(foundedstrings);
            $('#output').css('display', 'block');
          }
        }
        $("#search").focusout(function() {
          $('#output').css('display', 'none');
        });
        $("#search").focusin(function() {
          $('#output').css('display', 'block');
        });
      });
    } else {
      $('#output').css('display', 'none');
    }
  });
});

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h2>Search for users</h2>
      <input type="text" name="search" id="search" autocomplete="off" placeholder="search user name here....">
      <div id="output"></div>
    </div>
  </div>
</div>

But the results are not visible. I know that the ajax call is working i checked it with google inspect

Answer 1

The problem is that you are overwriting the content of #output inside your loop.

Try this code once

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h2>Search for users</h2>
      <input type="text" name="search" id="search" autocomplete="off" placeholder="Search user name here....">
      <div id="output"></div>
    </div>
  </div>
</div>

Now add your script with jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $("#search").keyup(function () {
      var query = $(this).val();
      if (query != "" && query.length >= 3) {
        var csv = $.ajax('csv-files/clothesshoesaccesories.csv');
        csv.done(function (data) {
          var row = data.split('\n');
          var foundedstrings = "";

          for (var i = 0; i < row.length; i++) {
            var column = row[i].split('|');
            var descTosearch = column[2];
            var href = column[column.length - 1];

            if (descTosearch.includes(query)) {
              foundedstrings += '<p><a href="' + href + '">' + descTosearch + '</a></p>';
            }
          }

          $('#output').html(foundedstrings);

        });
      } else {
        $('#output').css('display', 'none');
      }
    });

    // Show or hide results based on focus
    $("#search").focusout(function () {
      $('#output').css('display', 'none');
    });

    $("#search").focusin(function () {
      $('#output').css('display', 'block');
    });
  });
</script>

Additionally, it's better to handle the focusout and focusin events outside of the keyup event to prevent repeated event binding.

I hope this code is working fine.