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
– Mike_Laird, Commented Apr 6, 2011 at 18:40
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
– Mike_Laird, Commented Apr 8, 2011 at 18:55

Lachezar Raychev · Accepted Answer · 2013-03-18 13:00:43Z

0

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.

edited Mar 18, 2013 at 13:00

answered Mar 18, 2013 at 12:53

Lachezar Raychev

2,1234 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lachezar Raychev Over a year ago

Oh... i just saw you fixed the problem... nvm... :)

Fedy Venom · Accepted Answer · 2014-07-26 17:55:18Z

jQuery:

$("#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(data);//<== Change Here
                }
            });             
        },
        minLength: 2,
        select: function (event, ui){
            alert('|' + ui.item + '|2nd');
            $("#stateProvince").val(ui.item.value);
            return;
        }
    });

PHP:

while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)){            
    $row_array['label'] = $row['stateProvinceNameInEnglish'];  
    $row_array['value'] = $row['stateProvinceAbbreviation'];
    array_push($return_arr,$row_array);
}
echo json_encode($return_arr);

Collectives™ on Stack Overflow

jQuery Autocomplete ajax does not create dropdown of selections from php

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related