jquery ui 自动完成显示透明结果

Question

jquery ui 自动完成显示透明结果。我已经应用了所有在 Whosebug 上给出的不同问题但没有解决的答案。

这是我的代码

 <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>

这是html

<div class="container box">

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

</div>

这是php代码

<?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);



    ?>

输出是这样的

Answer 1

Php 不是我的母语，我希望它是正确的。我尝试为您提供替代方案，但您必须确保查询 returns 结果（您应该通过检查呈现的 HTML 来查看它，您必须在方括号之间包含值）。

<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>

jquery ui 自动完成显示透明结果

jquery ui autocomplete showing transparent results

jquery

jquery-ui-autocomplete