如何让 jQuery UI 自动完成功能与 json 源一起工作？

Question

此代码正在运行：

$('input#city').focus(function() {
    $(this).autocomplete({
        source: '/autosuggest_cities?region_id=' + $('select#region').val(),
        minLength: 1,
        select: function(event, ui) {
            $('#search-box #city_id').attr('value', ui.item.id);
        }
    });
});

但我不喜欢它，因为每次用户在自动建议文本字段上按键时它都会命中数据库。我宁愿点击数据库一次并将所有可能的建议存储在一个变量中，并将其设置为自动建议的来源。所以我尝试了这个：

    $.ajax({
        url: '/autosuggest_cities',
        type: 'get',
        data: 'region_id=' + $('select#region').val(),
        success: function(output) {
            global.available_cities = output;
        }
    });

    $('input#city').focus(function() {
        $(this).autocomplete({
            source: global.available_cities,
            minLength: 1
        });
    });

当我 console.log global.available_cities 时，我确实得到了一个看起来正确的 json 对象，例如：

[{"id":"19184","value":"Aiea"},{"id":"19516","value":"Anahola"},{"id":"20159","value":"Barbers Point"},{"id":"21999","value":"Camp H M Smith"},{"id":"16219","value":"Captain Cook"},{"id":"25135","value":"Eleele"},{"id":"15192","value":"Ewa Beach"},{"id":"26152","value":"Fort Shafter"},{"id":"27539","value":"Haiku"},{"id":"27546","value":"Hakalau"},{"id":"12603","value":"Haleiwa"},{"id":"27657","value":"Hana"},{"id":"11960","value":"Hanalei"},{"id":"27658","value":"Hanamaulu"},{"id":"11838","value":"Hanapepe"},{"id":"27916","value":"Hauula"},{"id":"27931","value":"Hawaii National Park"},{"id":"27933","value":"Hawi"},{"id":"28166","value":"Hickam AFB"},{"id":"8008","value":"Hilo"},{"id":"13747","value":"Holualoa"},{"id":"28457","value":"Honaunau"},{"id":"28470","value":"Honokaa"},{"id":"1221","value":"Honolulu"},{"id":"28471","value":"Honomu"},{"id":"28482","value":"Hoolehua"},{"id":"29284","value":"Kaaawa"},{"id":"29286","value":"Kahuku"},{"id":"8009","value":"Kahului"},{"id":"8010","value":"Kailua"},{"id":"29288","value":"Kailua Kona"},{"id":"11961","value":"Kailua-Kona"},{"id":"18379","value":"Kalaheo"},{"id":"29293","value":"Kalaupapa"},{"id":"29302","value":"Kamuela"},{"id":"8012","value":"Kaneohe"},{"id":"14283","value":"Kapaa"},{"id":"29322","value":"Kapaau"},{"id":"11792","value":"Kapolei"},{"id":"29342","value":"Kaumakani"},{"id":"8013","value":"Kaunakakai"},{"id":"11840","value":"Keaau"},{"id":"11962","value":"Kealakekua"},{"id":"29349","value":"Kealia"},{"id":"29359","value":"Keauhou"},{"id":"29386","value":"Kekaha"},{"id":"11777","value":"Kihei"},{"id":"29536","value":"Kilauea"},{"id":"18876","value":"Koloa"},{"id":"29739","value":"Kualapuu"},{"id":"14166","value":"Kula"},{"id":"29744","value":"Kunia"},{"id":"16950","value":"Kurtistown"},{"id":"8014","value":"Lahaina"},{"id":"12733","value":"Laie"},{"id":"8015","value":"Lanai City"},{"id":"30116","value":"Laupahoehoe"},{"id":"30148","value":"Lawai"},{"id":"8016","value":"Lihue"},{"id":"31035","value":"M C B H Kaneohe Bay"},{"id":"13539","value":"Makawao"},{"id":"31138","value":"Makaweli"},{"id":"31563","value":"Maunaloa"},{"id":"32160","value":"Mililani"},{"id":"32858","value":"Mountain View"},{"id":"15040","value":"Naalehu"},{"id":"33509","value":"Ninole"},{"id":"33931","value":"Ocean View"},{"id":"34146","value":"Ookala"},{"id":"34374","value":"Paauhau"},{"id":"34375","value":"Paauilo"},{"id":"34399","value":"Pahala"},{"id":"34400","value":"Pahoa"},{"id":"18798","value":"Paia"},{"id":"34493","value":"Papaaloa"},{"id":"34494","value":"Papaikou"},{"id":"8018","value":"Pearl City"},{"id":"34671","value":"Pearl Harbor"},{"id":"34774","value":"Pepeekeo"},{"id":"35531","value":"Princeville"},{"id":"12265","value":"Pukalani"},{"id":"35622","value":"Puunene"},{"id":"37200","value":"Schofield Barracks"},{"id":"39401","value":"Tripler Army Medical Ctr"},{"id":"40018","value":"Volcano"},{"id":"13879","value":"Wahiawa"},{"id":"40071","value":"Waialua"},{"id":"13759","value":"Waianae"},{"id":"15947","value":"Waikiki"},{"id":"18353","value":"Waikoloa"},{"id":"8019","value":"Wailuku"},{"id":"40072","value":"Waimanalo"},{"id":"13309","value":"Waimea"},{"id":"8020","value":"Waipahu"},{"id":"40083","value":"Wake Island"},{"id":"40900","value":"Wheeler Army Airfield"}]

但是当我开始在文本字段中输入等待建议时，我在控制台中收到了这个奇怪的服务器错误：

414 Request-URI Too Large
The requested URL's length exceeds the capacity limit for this server.

我做错了什么？如何使用 json 源进行自动建议，而无需每次在 keyup 上点击 php 脚本？

Answer 1

Phew 让它工作了。我所要做的就是添加

dataType: 'json' 

到我的 ajax 调用，一切正常。过几天系统允许我会标记这是正确答案。

Answer 2

试试，

$('input#city').focus(function() {
    $(this).autocomplete({
        source: function( request, response ) {
             response( global.available_cities )
        },
        minLength: 1
    });
});

但推荐的做法是，

$('input#city').focus(function() {
    $(this).autocomplete({
        source: function( request, response ) {
             var region_id = $('select#region').val();
             if( global.available_cities[region_id] != null ){
                 response( global.available_cities[region_id] )
             }else{

$.ajax({
    url: '/autosuggest_cities',
    type: 'get',
    data: 'region_id=' + region_id,
    success: function(output) {
        global.available_cities[region_id] = output;
        response( global.available_cities[region_id] )
    }
});


             }

        },
        minLength: 1
    });
});