jQuery UI的自動完成顯示 「無搜索結果」

Question

我想顯示

我有以下形式使用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> 

的search.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工作正常。它返回

[ 「拉維」， 「拉維」]

JS代碼

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

問題是，當我開始在文本框中鍵入立即顯示

沒有搜索結果。

我也嘗試JQuery UI Autocomplete Search Results do not display

Answer 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用戶界面自動完成只能用$ _GET

工作

所以我用$ _GET [ '長期']，見下圖

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(); 
     } 
    } 
});