繁体   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