using photon in leaflet outside the map

Question

I'm using the leaflet plugin photon to request adresses like here : https://adresse.data.gouv.fr/map/

It works fine and the geocoder was added to my map. Now I would like to put the geocoder outside of my map in a searchbox. Is there a way to do it ?

API_URL = '//api-adresse.data.gouv.fr';

var searchPoints = L.geoJson(null, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name);
    }
});

function showSearchPoints (geojson) {
searchPoints.clearLayers();
searchPoints.addData(geojson);
};

var photonControlOptions = {
resultsHandler: showSearchPoints,
placeholder:' Ex : Rue Diderot Paris',
position: 'topright',
url: API_URL + '/search/?',
noResultLabel: 'Aucun résultat',
};

var map = new L.Map("map", {
center: new L.LatLng(49.047, 1.605),
layers: [layerstreets],
zoom: 13,
zoomControl: false,
photonControl: true,
photonControlOptions: photonControlOptions
});

searchPoints.addTo(map);

Answer 1

A "simple" hack would be to create the photonControl outside the map instantiation, so that you can keep a reference to it. Similarly, instead of adding it directly to the map, call its onAdd method to retrieve the DOM container and place it wherever you need instead of within a map corner.

var map = L.map("map", {
    center: [49.047, 1.605],
    zoom: 13,
    zoomControl: false
});

var photonControl = new L.Control.Photon(photonControlOptions);
var photonContainer = photonControl.onAdd(map);
document.body.appendChild(photonContainer);

Demo: http://plnkr.co/edit/jv2qTfX4iXCccMtiL2LG?p=preview