2016-05-14 73 views
1

我已經提到Auto Complete Text Box using JQuery, PHP, MySQL自動完成的文本框的JQuery PHP MySQL的

我的頁面被劃分爲不同的PHP模板。下面是代碼:

的header.php

<!-- JQuery AutoComplete CSS --> 
<link href="../css/jquery.autocomplete.css" rel="stylesheet"> 

<!-- JQuery JS --> 
<script type="text/javascript" src="../js/jquery.js"></script> 

<!-- JQuery AutoComplete JS --> 
<script type="text/javascript" src="../js/jquery.autocomplete.js"></script> 

主頁 存在此頁面內http://localhost/booking/mainpage.php

<tr> 
<td class="col-md-4"><label class="control-label">Pooja Name</label></td> 
<td class="col-md-8"><input type="text" name="txtPoojaName" id="poojaName" class="form-control" placeholder="Enter Pooja Name"></td> 
</tr> 

我已經包含在在主頁的腳本代碼在身體標記結束之前非常結束。

<script> 
$(document).ready(function(){ 
    $("#poojaName").autocomplete("autocomplete.php", { 
     selectFirst: true 
    }); 
}); 
</script> 

autocomplete.php

本頁面內部存在http://localhost/booking/autocomplete.php

<?php 
    $q=$_GET['q']; 
    $my_data=mysql_real_escape_string($q); 
    $dbc=mysqli_connect('localhost','root','[email protected]','srkbs') or die("Database Error"); 
    $sql="select distinct poojaname from v_poojadetails where poojaname like '%$my_data%' order by poojaname"; 
    $result = mysqli_query($dbc,$sql) or die(mysqli_error()); 
    //echo mysqli_num_rows($result); 
    if($result) 
    { 
     while($row=mysqli_fetch_array($result)) 
     { 
      echo $row['PoojaName']."\n"; 
     } 
    } 
?> 

我已分別測試了autocomplete.php並返回結果集。我想我在JQuery或其他地方犯了一些錯誤。

請指教。

回答

0

就在這裏看看:http://jqueryui.com/autocomplete/

$("#poojaName").autocomplete({ 
     source: ["poojaOne","poojaTwo"."poojaThree"], 
     selectFirst: true 
}) 

當你與autocomplete.php填充你的POOJA列表,你應該使用Ajax引進和在PHP文件列表,你最好還是附和了一個數組使用json_encode。看看這裏http://php.net/manual/en/function.json-encode.php看看如何將PHP數組編碼爲JSON。

+0

還有其他資源嗎?我使用Bootstrap CSS,並且該解決方案具有自己的CSS。我明白了使用PHP的AJAX的重要性。謝謝 – Rajiv