jquery ui 자동 완성 문제

Question

국가를 포함하는 선택 상자가 있는데 하나를 선택하면 도시 필드의 자동 완성 데이터가 ajax를 통해로드되기를 원합니다.

// 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"); 
} 

이 다음 JSON을 반환합니다 : [ "애버 데어", "애버딘", "에버리스트 위스", "애 빙던", "애크 팅턴", "에어 드리", "올 더숏"여기

내 코드입니다 , "Alfreton" "Alloa" "Amersham" "Andover" "Antrim" "Arbroath" "Ardrossan" "Arnold" "Ashford" "Ashington" "Ashton-under- Lyne ","Atherton ","Aylesbury ","Ayr "...]

그러나 작동하지 않습니다. 도시 상자에 입력을 시작하면 스타일이 변경되어 자동 완성기에서 작업을 수행하지만이 데이터는 표시되지 않습니다. 위의 코드를 하드 코딩하면 작동합니다.

누구든지 잘못된 것을 볼 수 있습니까?

덕분에

Answer 1

감사합니다,하지만 대답했다 :

// 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

난 당신이 원격 JSON 데이터 (Ajax/jQuery.getJSON 참조) 얻을 수 있도록 비동기 호출에 대한 콜백 메서드를 사용하는 것 같아요. 어쩌면 당신은 글로벌 변수에 도시를 저장할 수 있습니다 또는 자동 완성 컨트롤의 소스로 직접 응답을 설정 :

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