jQuery Autocomplete ajax does not create dropdown of selections from php

Question

I'm struggling, as a newbie, with an Autocomplete that does not create a dropdown with selection options. The full code has 2 stages - the user selects a country via radio buttons, then starts an Autocomplete to select a state/province. Per Firefox, the country code and the state typing POST to the php script, the query executes correctly using both country and state script elements, a response is constructed. Autocomplete does not create a dropdown with selections. Firefox gives a parse error message and improper JSON message from my error: alert. When I put the response elements in JSONlint, it says the element is valid JSON. Firefox shows correct content in query arrays as I change country and change the state typing. I have copied the success function and the select option, but I'm unsure about them. The alert in the select option does not trigger. Help would be appreciated to get a populated dropdown. Here's the code:

jQuery Autocomplete:

    $("#stateProvince").autocomplete
    ({ 
        source: function( request, response )
        {           

            $.ajax(
                            { 
                url: "getStateProvince.php",
                data: {
                                          term: request.term,   
                                          country: $('input[name=country]:checked').val(),    
                                          },        
                type: "POST",  
                dataType: "json",
                error: function(x,y,z) {
                  alert(x+'\n'+y+'\n'+z);};
                success: function( data ) 
                {
                    response( $.map( data, function( item ) 
                    {
                        return{
                                                      label: item.label,
                                                      value: item.value
                                                      }
                    }));
                }
            });             
        },
        minLength: 2,
        select: function (event, ui)   //is this select necessary?  correct?   return true or false?
                {
                alert('|' + ui.item + '|2nd');
                $("#stateProvince").val(ui.item.value);
                return;
                }
                 });

selected php:

    while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) 
    {
/* In each row, pull stateProvinceNameInEnglish and stateProvinceAbbreviation. */             
        $row_array['label'] = $row['stateProvinceNameInEnglish'];  
        $row_array['value'] = $row['stateProvinceAbbreviation'];

        array_push($return_arr,$row_array);
    }

} /* Toss back state or province results as a json encoded array. */ echo json_encode($return_arr);

An example of the data returned from json_encode($return_arr) is [{"label":"Alabama","value":"AL"},{"label":"Alaska","value":"AK"}] Is this proper and readable by the success function? — Mike_Laird
Fixed! The problem was my php was returning test information and some heading info. When removed, the php returns only the array of JSON objects and then, the Autocomplete dropdown box started working. Live and learn. — Mike_Laird

Lachezar Raychev Lachezar Raychev · Accepted Answer · 2013-03-18T12:53:30

Have you tried it like this :

public function echoPhpArrayForAutocomplete(){
    foreach($yourArray as $row){
        $string .= '{';
    $string .= '"label" : "'.$row['stateProvinceNameInEnglish'].'",';
    $string .= '"value" : "'.$row['stateProvinceAbbreviation'].'",';
    $string .= '"additionlInfo" : "'.$row['additionalInfo'].'"';
    $string .= '},';
    }
    echo rtrim($string, ',');
}

Than you create you array like this in the

<script>
    var arrayFromPhp = [ <?php echoPhpArrayForAutocomplete(); ?> ];
</script>

Than you make your input to show the drop down on keyup and give it the arrayw you want like this:

$('#stateProvince').live('keyup.autocomplete',function(){
    $input = $(this);

$input.autocomplete({
    minLength: 0,
    source:  arrayFromPhp , // Array with object describing the keywords. Defined with php in the view file
     }).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>"+item.label+"</a>" )
    .appendTo( ul )
    .bind();
  }
});

You may even put the 'additionInfo' to .append( ""+item.label+"" ) like this .append( "a tag"+item.additionInfo+" close a tag" ) and it will show that in the dropdown... I don't know if i helped but i am at work this is the most time i could spare right now... If this did not solve it i would be glad to help later. Regards.

jQuery Autocomplete ajax does not create dropdown of selections from php

2 Answers