Mapbox GL geocoder autocomplete

Question

I am trying to to create multiple input autocomplete search fields that function same as the demo at https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/ . However, I do not want the Search input box to be inside the Map box, I want to have the Search field outside of the map. I have not found a good example of how to create this using the mapbox gl examples and api docs.

I am looking for something similar to Google Autocomplete feature (https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete) but in Mapbox GL where I can just reference and id (ie, id="from_address") and Mapbox will attach the autocomplete behavior.

Answer 1

https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-outside-the-map/

<div id='geocoder' class='geocoder'></div>

var geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
});

document.getElementById('geocoder').appendChild(geocoder.onAdd(map));

Answer 2

I have similar situation where I need to place the address search box outside of mapbox map. After research a lot I am able to do that using this example of mapbox - https://www.mapbox.com/mapbox.js/example/v1.0.0/map-center-geocoding/