how to close the search result after selecting one location using mapbox

Question

How to close the search result after selecting one location using mapbox? I am using the auto complete feature of mapbox, but after choosing a particular location it is not closing the search result box. I have added the auto complete feature like this:

geocoder = L.mapbox.geocoderControl('mapbox.places', {position: 'topleft', keepOpen: true, autocomplete:true});
            geocoder.addTo(map);

Answer 1

Remove the keepOpen option (which keeps it always open) Then to close listen for the select event on the L.mapbox.geocoderControl instance. When fired use the _toggle method.

var geocoder = L.mapbox.geocoderControl('mapbox.places', {
    position: 'topleft',
    //keepOpen: false,
    autocomplete:true
});

geocoder.addTo(map);

geocoder.on('select', function () {
    geocoder._toggle()
})

Undocumented and uses a 'private' method thus i'm unsure as to the lifespan of this solution/hack. But it works ;)

Answer 2

I had the same problem and manage to fix it like that:

var geocoder = L.mapbox.geocoderControl('mapbox.places', {
    position: 'topleft',
    keepOpen: true,
    autocomplete:true
});

geocoder.addTo(map);

geocoder.on('select', function () {
  this._results.innerHTML = '';
  this._input.value = '';
})

The _toggle() solution didn't work for me because it made the field close forever (couldn't open it again when clicking on the magnifier icon).

Like in @iH8 fix, it's only about private method so it might be not long lasting.