簡體   English   中英

jQuery自動完成PHP,Ajax和Json

[英]Jquery autocomplete PHP, Ajax and Json

我正在嘗試完成一個使用jquery自動完成功能的腳本。

我編寫了一個帶有文本框的用戶FORM,當用戶開始輸入公司名稱時,jquery函數將運行並在數據表上執行查找,並以json格式返回任何匹配項。

然后,用戶可以選擇所需的公司名稱,然后將其插入到文本庫中。 同時,campany徽標的名稱作為.png文件插入到另一個文本框中。

我遇到的問題是:當用戶開始鍵入jquery函數時,運行的結果是顯示數據表中的所有記錄,而不僅僅是顯示包含用戶鍵入內容的記錄。

我的公司名稱文本框和圖像名稱文本框:

<input name="ClientName" placeholder="Client name" class="imaindatesel" id="search-box_1" type="text"  size="60" maxlength="40" />
<input name="CompanyImage" type="text"   id="company_image_1" class="ui-autocomplete-input"/>

我的jQuery鏈接

<link href="../../../../globalscripts/autocomplete/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../../../../globalscripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="../../../../globalscripts/jquery-ui.js"></script>

我的jQuery函數:

$(document).ready(function() {    
$('#search-box_1').autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'check_name.php',
        dataType: "json",
        data: {
           name_startsWith: request.term//,

        },
         success: function( data ) {
             response( $.map( data, function( item ) {
                var code = item.split("|");
                return {
                    label: code[0],
                    value: code[0],
                    data : item
                }
            }));
        }
    });
},
autoFocus: true,            
minLength: 3,
select: function( event, ui ) {
    var names = ui.item.data.split("|");                        
    $('#company_image_1').val(names[1]);

}               
});    

})

我的PHP腳本

$query = $db->query("SELECT RecordID, CompanyName, ImageName FROM conf_image_depository WHERE CompanyName LIKE '".$_POST['name_startsWith']."%' GROUP BY CompanyName ORDER BY CompanyName ASC");


$data = array();

while ($row = $query->fetch_assoc()) {
    $name = $row['CompanyName'].'|'.$row['ImageName'];
    array_push($data, $name);   
}

//return json data
echo json_encode($data);

ajax調用的結果:

["British Airways|British-Airways.png","British Assessment Bureau|british-assessment-bureau.png","British Gas|BritishGas.png","British Sugar|BritishSugar.png"] 

誰能看到為什么當用戶開始鍵入數據表中所有記錄的完整列表時的原因。

非常感謝您的寶貴時間。

許多自動完成的小部件都使用GET請求,因此更改PHP代碼以讀取GET(或querystring)參數將解決此問題。

$ _POST讀取POST數據,$ _ GET讀取GET或querystring參數。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM