1

我有一個選擇框包含國家,當選擇一個,我希望我的城市領域的自動填充數據通過ajax加載。jquery ui自動完成問題

這裏是我的代碼:

// 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: [ 「阿伯代爾」, 「仔」, 「阿伯里斯特威斯」, 「阿賓登」, 「艾寧頓」, 「艾爾德里」, 「奧爾德肖特」 「阿爾弗雷」,「阿洛厄」,「阿爾琴查姆」,「Amersham公司」,「富陽」,「安特里姆」,「阿布羅斯」,「阿德羅森」,「阿諾」,「阿什福德」,「阿欣頓」,「阿什頓不足Lyne「,」Atherton「,」Aylesbury「,」Ayr「,...]

但是,它不起作用。當我開始在城市框中輸入時,樣式會發生變化,所以autocompleter正在做某件事,但它不會顯示這些數據。如果我硬編碼上述它的作品。

任何人都可以看到有什麼問題嗎?

感謝

回答

0

謝謝,但得到的答覆是:

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

我認爲你必須使用一個回調方法爲你的異步調用獲得遠程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 
    }); 
}