jquery ui autocomplete showing transparent results

Question

jquery ui autocomplete showing transparent result. I have applied all the answers which was given different questions on the stackoverflow but didnot worked out.

this is my code

 <link rel="stylesheet" href="css/jquery-ui.css" />

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
  $(function() {
     $( "#search" ).autocomplete({

       source: 'scripts/auto.php',

     });

  });
</script>

this is the html

<div class="container box">

<h2>Search Here</h2>
<input type="text" name="search" id="search" placeholder="search here....">  

</div>

this is the php code

<?php
include('../admin/functions/dbconfig.php');


    $return_arr = array();
    $searchTerm = $_GET['term'];
    $sql ="SELECT lemma FROM lemma WHERE lemma like '" . $searchTerm . "%' ORDER BY lemma LIMIT 0,6";
    $data = array();
    $q=mysqli_query($conn,$sql);
    while ($row = mysqli_fetch_assoc($q)) {
    $data[] = $row[];
    }
    echo json_encode($data);



    ?>

output is like this

Answer 1

Php is not my first language, I hope it is correct. I try to offer you an alternative, but you must be sure that you query returns results (you should see it by check the rendered HTML, you must have values between square brackets).

<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<!-- PHP -->

<?php
  include('../admin/functions/dbconfig.php');

  function getArray() {
    $return_arr = array();
    $searchTerm = $_GET['term'];
    $sql ="SELECT lemma FROM lemma WHERE lemma like '" . $searchTerm . "%' ORDER BY lemma LIMIT 0,6";
    $data = array();
    $q=mysqli_query($conn,$sql);
    while ($row = mysqli_fetch_assoc($q)) {
    echo "'" . $row[] . "', "; 
    }
    
  }


?>


<!-- JS -->

<script type="text/javascript">
  $(function() {
    
    var availableTags = [<?php getArray(); ?>];

    $("#search").autocomplete({
      source: availableTags  //'scripts/auto.php',
    });

  });
</script>



<!-- HTML -->

<div class="container box">

  <h2>Search Here</h2>
  <input type="text" name="search" id="search" placeholder="search here....">

</div>