jQuery Autocomplete ajax does not create dropdown of selections from php - 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);

Answer 1

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.

Answer 2

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