Question

Im using Google Map’s autocomplete feature to suggest locations as a user types (http://code.google.com/p/geo-autocomplete/). Once a user clicks on one of the suggestions, the javascript fills it into the text field. Once this happens, I then want to reload the page, passing through the full address the user has clicked on through the URL.

I tried putting onclick()’s in the list of suggestions and have this reload the page but, for example, if user types “dubl” and then click “Dublin, Ireland” from the suggestions, the page reloads passing though “dubl”. So I need page to reload after javascript has filled the text field. But I cannot find where javascript is doing this…

Answer 1

I do not know which API jquery uses, and I can’t provide an exact answer without more information, but I think I can point the way. You have a few problems to overcome:

First, autocomplete API’s usually have an event for selecting a dropdown. This is usually because the elements do not exist until autocomplete creates them, so you cannot write a selector ahead of time. jQuery UI autocomplete does this:

"Triggered when an item is selected from the menu; 
ui.item refers to the selected item. The default 
action of select is to replace the text field's value 
with the value of the selected item. Canceling this event 
prevents the value from being updated, but does not 
prevent the menu from closing."

$( ".selector" ).autocomplete({
   select: function(event, ui) { //override this behavior }
});

Your other big problem, is that if you cannot stop autocomplete from triggering a page reload, there isn’t an effective client side way of communicating between page reloads. Unless you can append a query string to the URL like .html?reload=true or something like that, you won’t be able to tell the reloaded page that it has, in face, been reloaded.