jquery ui autocomplete problème

Question

J'ai une boîte de sélection contenant des pays, et quand on est sélectionné, je veux que mes données de saisie semi-automatique pour le champ de la ville à charger via ajax.

voici mon code:

// Sets up the autocompleter depending on the currently 
// selected country 
$(document).ready(function() { 
    var cache = getCities(); 
    $('#registration_city_id').autocomplete(
    { 
     source: cache    
    } 
); 

    cache = getCities(); 

    // update the cache array when a different country is selected 
    $("#registration_country_id").change(function() { 
    cache = getCities(); 
    }); 
}); 

/** 
* Gets the cities associated with the currently selected country 
*/ 
function getCities() 
{ 
    var cityId = $("#registration_country_id :selected").attr('value'); 
    return $.getJSON("/ajax/cities/" + cityId + ".html"); 
} 

Cela renvoie le JSON suivant: [ "Aberdare", "Aberdeen", "Aberystwyth", "Abingdon", "Accrington", "Airdrie", "Aldershot" , "Alfreton", "Alloa", "Altrincham", "Amersham", "Andover", "Antrim", "Arbroath", "Ardrossan", "Arnold", "Ashford", "Ashington", "Ashton-under- Lyne "," Atherton "," Aylesbury "," Ayr ", ...]

Mais, cela ne fonctionne pas. Quand je commence à taper dans la boîte de ville, le style change de sorte que l'autocompléteur fasse quelque chose, mais il n'affiche pas ces données. Si je code dur le ci-dessus cela fonctionne.

Quelqu'un peut-il voir ce qui ne va pas?

Merci

Answer 1

Merci, mais la réponse a été:

// Sets up the autocompleter depending on the currently 
// selected country 
$(document).ready(function() { 

    setupAutocompleter(); 

    // update the cache array when a different country is selected 
    $("#registration_country_id").change(function() { 
    setupAutocompleter(); 
    }); 
}); 

function setupAutocompleter() 
{ 
    var cityId = $("#registration_country_id :selected").attr('value'); 
    $.getJSON("/ajax/cities/" + cityId + ".html", function(cities) { 
    $('#registration_city_id').autocomplete(
     { 
     source: cities 
     } 
    ) 
    }); 
} 

Answer 2

Je pense que vous devez utiliser une méthode de rappel pour votre appel asynchrone pour obtenir les données JSON à distance (Voir Ajax/jQuery.getJSON). Peut-être que vous pouvez stocker les villes dans une variable globale ou de définir la réponse directement en tant que source de votre contrôle de saisie semi-automatique:

function updateCities() 
{ 
    var cityId = $("#registration_country_id :selected").attr('value'); 
    $.getJSON("/ajax/cities/" + cityId + ".html", function(json){ 
     CITY_CACHE = json; 
     //Alternatively set the source of the autocomplete control 
    }); 
}