Jquery autocomplete list

Question

The jquery function that I'm using is:

$.getJSON("rpc2.php?queryString=" +inputString+"", function(data) { 
if(data.length >0) {
$.each(data, function(i, data){
var city= data.city;
var country= data.country;
$('#suggestions').show();
$('#autoSuggestionsList').html('<li>'+ city+'</li>');
 });
 }
 });

The PHP looks like:

if(strlen($queryString) >0) {
$query = "SELECT * FROM cities WHERE city_accented LIKE '$queryString%' LIMIT 5";
$result = mysql_query($query) or die("There is an error in database");
$json = array();
while($row = mysql_fetch_array($result)){
$json['city'] = $row['city_accented'];
$json['country'] = $row['country'];
$data[] = $json;  
}
}
print json_encode($data);

The response that I'm getting from PHP is:

[{"city":"Lors","country":"ad"},{"city":"Lo Serrat","country":"ad"},{"city":"Lobabi","country":"af"},{"city":"Lobya","country":"af"},{"city":"Locakan","country":"af"}]

The problem is that in autoSuggestionsList DIV only the first city is listed, not all five from PHP response. Why there is no other cities from php response in autoSuggestionsList div?

Answer 1

Try:

$('#autoSuggestionsList').append('<li/>' + city + '</li>');