Jquery自动完成PHP,Ajax和Json

时间:2016-10-26 09:53:48

标签: php jquery ajax

我正在尝试完成一个使用jquery自动完成的脚本。

我写了一个用户FORM,它有一个文本框,当用户开始输入jquery函数运行的公司名称时,在数据表上查找并以json格式返回任何匹配。

然后,用户可以选择所需的公司名称,然后将其插入到textbax中。同时,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"] 

任何人都可以看到为什么当用户开始输入数据表中所有记录的完整列表时显示。

非常感谢你的时间。

1 个答案:

答案 0 :(得分:0)

许多自动完成小部件使用GET请求,因此更改PHP代码以读取GET(或查询字符串)参数将解决此问题。

$ _ POST读取POSTed数据,$ _GET读取GET或查询字符串参数。