如何在Ajax和PHP中創建自動完成搜索？

我正在創建一個基本的自動完成ajax腳本來獲取mysql數據庫搜索結果，但無法在php頁面中顯示結果。如何在Ajax和PHP中創建自動完成搜索？

我可以看到從search.php數據庫中獲取的數據是以數組的形式獲取的，但是check.php頁面沒有顯示相同的數據。這是因爲某種CSS或其他問題？

任何建議將有很大的幫助！

下面是代碼>

check.php

<html> 
<head> 
<title></title> 

<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> 
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 

<style type="text/css"> 

    li.ui-menu-item{ 
     font-size: 12px !important; 
    } 

</style> 

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $('#regionsearch').autocomplete({ 
      source: 'search.php', 
      minLength:1 
     }); 
    }); 

</script> 


</head> 

<body> 

<form action="" method="POST"> 
    Search: <input type="text" name="search" id="regionsearch"/> 
</form> 

</body> 
</html>

的search.php

<?php 


$dblink = mysql_connect('localhost', 'root', 'root') or die(mysql_error()); 
mysql_select_db('user_information'); 


if(isset($_REQUEST['term'])) 
    exit(); 




$rs = mysql_query('Select * from registered_users where first_name like "'.ucfirst($_REQUEST['term']).'%" order by id asc limit 0,10', 
    $dblink); 

$data = array(); 
while($row=mysql_fetch_assoc($rs, MYSQL_ASSOC)){ 
    $data[] = array(
      'label'=>$row['first_name'], 
      'value'=>$row['first_name'] 
     ); 
} 

echo json_encode($data); 
flush() 

?>

來源

2015-12-31 Bishwaroop

當我鍵入所需的字母，它說：「沒有搜索資源ults' – Bishwaroop

是的，因爲你正在使用jQuery UI的插件，你會需要嵌入適當的CSS。

跟着你已經做了什麼，在你的HTML模板使用這行：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"/>

你應該還有SE中的文檔來獲取遠程的數據和調整代碼：

https://jqueryui.com/autocomplete/#remote-jsonp

$(document).ready(function(){ 
    $('#regionsearch').autocomplete({ 
     source: 'search.php', 
     minLength:1, 
     dataType: "jsonp", 
     data: { 
      q: request.term 
     }, 
     success: function(data) { 
      response(data); 
     } 
    }); 
});

來源

2015-12-31 09:55:22 jiboulex

我添加了這個，現在它不顯示任何東西，但數據被抓取在search.php中，但像往常一樣，但現在沒有在check.php – Bishwaroop

您應該檢查文檔以查看如何從遠程數據源獲取數據：https://jqueryui.com/autocomplete/#remote-jsonp – jiboulex

嘗試過，仍然不工作:( – Bishwaroop

如何在Ajax和PHP中創建自動完成搜索？

回答

相關問題