Created
December 11, 2010 19:55
-
-
Save ashaw/737609 to your computer and use it in GitHub Desktop.
demo of this code: http://dl.dropbox.com/u/715596/autocomplete.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
#q,#shadow_q { | |
position:absolute; | |
top:5px; | |
left:5px; | |
width:500px; | |
height:30px; | |
font-size:25px; | |
} | |
#q { | |
z-index:999; | |
color:#000; | |
opacity:.75; | |
} | |
#shadow_q { | |
z-index:0; | |
color:#000; | |
} | |
#submit-btn { | |
position:absolute; | |
top:5px; | |
left:550px; | |
height:30px; | |
} | |
</style> | |
<form id="query"> | |
<input id="q" type="text"></input> | |
<input id="submit-btn" type="submit" value="submit" /> | |
<!-- | |
important that shadow_q be the last "tabbable" element, | |
because the js skips focus back to first input | |
--> | |
<input id="shadow_q" type="text"></input> | |
</form> | |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
<script type="text/javascript"> | |
var addrs; | |
var accepted_suggestion = false; | |
var field_is_empty = function(id) { | |
return ($("#" + id).val() === "") ? true : false; | |
}; | |
var accept_suggestion = function() { | |
return ( accepted_suggestion == false && !field_is_empty("q") && !field_is_empty("shadow_q") ) ? true : false; | |
}; | |
var load_stored_addrs = function() { | |
return window.localStorage['addrs'] ? JSON.parse(window.localStorage['addrs']) : [] | |
}; | |
var add_addr_to_stor = function(addr) { | |
addrs = []; | |
if (window.localStorage['addrs']) { | |
addrs = JSON.parse(window.localStorage['addrs']) | |
} | |
addrs.push(addr); | |
window.localStorage['addrs'] = JSON.stringify(addrs); | |
}; | |
var geocoder = new google.maps.Geocoder(); | |
var cur_google_suggestion = ''; | |
var get_google_suggestions = function(addr) { | |
if(addr == "") { | |
cur_google_suggestion = ''; | |
return; | |
} | |
geocoder.geocode({'address': addr}, function(results, status){ | |
if (status == google.maps.GeocoderStatus.OK) { | |
console.log(results[0].formatted_address) | |
cur_google_suggestion = results[0].formatted_address; | |
} else { | |
console.log("uh oh"); | |
} | |
}); | |
} | |
$(function() { | |
$("#q").keyup(function() { | |
get_google_suggestions($("#q").val()); | |
$("#shadow_q").val(cur_google_suggestion); | |
}); | |
// accept suggestions on tab and right arrow | |
$("#q").keydown(function(e) { | |
if ( (e.keyCode === 9 || e.keyCode === 39) && accept_suggestion() ) { | |
e.preventDefault(); | |
accepted_suggestion = true; | |
$("#q").val($("#shadow_q").val()); | |
} else { | |
accepted_suggestion = false; | |
} | |
}); | |
// if you focus on #shadow_q, move | |
// focus back to #q | |
$("#shadow_q").focus(function() { | |
$("#q").focus(); | |
}); | |
// store | |
$("#query").submit(function(e) { | |
e.preventDefault(); | |
addr = $("#q").val(); | |
add_addr_to_stor(addr); | |
$("#q").val('') | |
}); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sweet!