jQuery UI 自动完成显示“无搜索结果”答案

【问题标题】：jQuery UI Autocomplete Display "No search results"jQuery UI 自动完成显示“无搜索结果”
【发布时间】：2023-03-05 00:51:02
【问题描述】：

我想使用 jQuery UI 自动完成显示来自 mysql 数据库的建议

我有以下表格

 <form action="search.php" method="POST">
        <input type="text" name="search" id="search-input">
        <input type="submit" value="Submit" id="submit">
 </form>

搜索.php

    <?php 
require_once 'db.php';

$a = array();

    if (isset($_POST['search']) && !empty($_POST['search'])) {
        $search_param = trim($_POST['search']);

        $slct_search = $db->prepare("SELECT student_name FROM student_details WHERE student_name LIKE ?") or die($db->error);
        $slct_search->bind_param('s', $search_param);
        $slct_search->execute();        
        $res = $slct_search->get_result();  
        if($res->num_rows) {            
            while ($result = $res->fetch_object()) {
                $a[] = $result->student_name;
            }
            echo json_encode($a);
        } else {
            echo 'OOPS we had a problem';
        }   
    }
?>

search.php 工作正常。它返回

["ravi","ravi"]

JS 代码

    $(function() {
      $("#search-input").autocomplete({
        source: "search.php",
        minLength: 2
      }); 
    });

问题是当我开始在文本框中输入时立即显示

没有搜索结果。

我也试过JQuery UI Autocomplete Search Results do not display

【问题讨论】：

请任何一个例子回答

标签： php mysql jquery-ui

【解决方案1】：

HTML

  <form action="" method="">
        <input type="text" name="search" id="search-input" autocomplete="off">
        <input type="submit" value="Submit" id="submit">
        <div id="empty-message"></div>
  </form>

现在search.php

    $searchTerm = trim($_GET['term']);

    $query = $db->query("SELECT student_name FROM student_details WHERE student_name LIKE '%".$searchTerm."%' ORDER BY student_name ASC");


    while ($row = $query->fetch_object()) {
        $data[] = $row->student_name;
    }

    echo json_encode($data);

jquery ui 自动完成仅适用于 $_GET

所以我使用的是 $_GET['term']，见下图

JS 代码

$('#search-input').autocomplete({
    source: 'search.php',
    minLength: 2,
    response: function(event, ui) {
        // ui.content is the array that's about to be sent to the response callback.
        if (ui.content.length === 0) {
            $("#empty-message").text("No results found");
        } else {
            $("#empty-message").empty();
        }
    }
});

【讨论】：