如何讓jQuery UI Autocomplete與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); 
     } 
    }); 
}); 

但由於它每一次的自動提示文本字段的用戶密鑰UPS訪問數據庫，我不喜歡它。我寧願打一次數據庫，將所有可能的建議存儲在一個變量中，並將其設置爲自動建議的來源。所以，我想這一點：

$.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

唷得到它的工作。我所要做的只是添加

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