How to get jQuery UI Autocomplete to work with json source? - php

Question

This code is working:
$('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);
}
});
});
But I don't like it because it hits the database each time the user key ups on the autosuggest text field. I rather hit the databse once and store all possible suggestions inside a variable and set that as the source for the autosuggest. So I tried this:
$.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
});
});
When I console.log global.available_cities I do get a json object that looks right, for example:
[{"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"}]
But when I start typing in the text field awaitng suggestions I get this bizzare server error instead in my console:
414 Request-URI Too Large
The requested URL's length exceeds the capacity limit for this server.
What am I doing wrong? How can I use a json source for auto suggest without hitting the php script each time on keyup?

Answer 1

Phew got it working. All I had to do was add
dataType: 'json'
to my ajax call and all works fine. Will mark this is right answer in a few days when the system allows me.

Answer 2

try,
$('input#city').focus(function() {
$(this).autocomplete({
source: function( request, response ) {
response( global.available_cities )
},
minLength: 1
});
});
But the recommended way of doing this is,
$('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
});
});