I am looking for a way to clear the results of a geocomplete (version 1.5.0) control.I have tried the various ways that were mentioned here but to no avail.
The idea is when the user clears the field after entering a biz name I would like to have geocomplete also reset its "internals". Right now, though the field clears its input, as soon as it looses focus (user clicks elsewhere on the page), geocomplete puts back the address entered
<html>
....
<label for="geocomplete">Adress</label><input id="geocomplete" type="search" placeholder="Type you Address here" tabindex="1"/>
....
</html>
<javascript>
...
$("#geocomplete").geocomplete({
map: ".map_canvas",
mapOptions: {
zoom: 14,
scrollwheel: false,
mapTypeId: "roadmap",
streetViewControl:false,
mapTypeControl:false
},
types: ["establishment"],
}).bind("geocode:result", function(event, result) {
// do stuff here
});
//
$('#geocomplete').on('input', function() {
// Field empty... clear content
if($("#geocomplete").val() == "")
{
// Clear
//$('#geocomplete').data().autocomplete.term = null;
//$("#geocomplete").geocomplete().autocomplete()[0].value = "";
}
});
....
</javascript>
I simply register an event listener on the input field (whenever the user types in my case) and clear all my fields in response to it. Notice: I also call geocomplete('initMap') at the end to reset the map (and I guess also geocomplete's internals). Sorry for it being CoffeeScript, but you should get the idea:
@query_field.bind('input', => @resetLocation())
...
resetLocation: ->
@reference_field.val(null)
@city_field.val(null)
@formatted_address_field.val(null)
$( '#venue_details [name=name]' ).text('')
$( '#venue_details [name=formatted_address]' ).text('')
@query_field.removeClass( 'approved' )
@query_field.geocomplete( 'initMap' )