Как получить 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); 
     } 
    }); 
}); 

Но мне не нравится, потому что он попадет к базе данных каждый раз, когда ключевые пользовательские окна на автозаполнении текстового поля. Я скорее ударил базу данных один раз и сохранил все возможные предложения внутри переменной и установил это как источник для автозапуска. Так что я попытался это:

$.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 предложения I получить эту ошибку сервера 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 
    }); 
});