Jquery autocomplete PHP, Ajax and Json

Question

I am trying to complete a script that uses jquery autocomplete.

I have written a user FORM which has a textbox, when the user starts to type in the name of a company the jquery function runs and performs a look up on the data table and returns any matches in json format.

The user can then select the required company name and this then gets inserted in to the the textbax. At the same time the name of the campany logo is inserts in to anopther textbox as a .png file.

The issue I am having is: when the user starts to type the jquery function runs but the result is displaying all the records in the data table and not just the records that contain what the user has typed.

My company name textbox and image name textbox:

<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"/>

My links to 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>

My jquery function:

$(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]);

}               
});    

})

My PHP script

$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);

The result of the ajax call:

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

Can anyone see why when the user starts to type a complete list of all the records in the data table are displayed.

Many thanks in advance for your time.

Answer 1

Many autocomplete widgets use GET requests, so changing the PHP code to read GET (or querystring) parameters will resolve the issue.

$_POST reads POSTed data, $_GET reads GET or querystring parameters.