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

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

    $.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"}]

但是当我开始在文本字段中输入awaitng建议时，我会在我的控制台中收到此bizzare服务器错误：

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

我做错了什么？我怎样才能使用json源进行自动建议而不必每次都在键盘上点击php脚本？

Answer 1

试，

$('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
    });
});

Answer 2

Phew让它发挥作用。我所要做的只是添加

dataType: 'json'

到我的ajax电话，一切正常。在系统允许我的几天内，这标志着这是正确答案。

如何让jQuery UI Autocomplete与json源一起使用？

2 个答案: