title: How to do search by input leaflet?
body: <p>I need your help, I am using the Leaflet library, I would like to put the address search, but not the search inside the map, but yes, with an input, outside the map:</p>
  
  <p><a href="https://i.stack.imgur.com/9eozL.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>However, I saw that it can be done, <a href="https://nominatim.org/release-docs/develop/" rel="nofollow noreferrer">Nominatim</a> even uses it (<a href="https://nominatim.openstreetmap.org/" rel="nofollow noreferrer">https://nominatim.openstreetmap.org/</a>), but there are no explanations on how to do it.</p>
  
  <p><strong>The Code looks like this</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var target = document.getElementById('map');
  
  document.addEventListener('DOMContentLoaded', function(e){ //executa o código somente após carregar o DOM
      var optionsMap = {
          center: [-21.511263, -51.434978],
          zoom: 15
      }
  
      // criação do mapa
      let map = new L.map(target, optionsMap);
      map.doubleClickZoom.disable();
  
      //adicionar uma camada de bloco do OpenStreetMap
      let basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      }); basemap.addTo(map);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Imports*/
  @import 'reset.css';
  @import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
  @import 'https://unpkg.com/leaflet@1.6.0/dist/leaflet.css';
  @import 'popup.css';
  
  /*Geral*/
  body{
      background-color: rgb(109, 164, 182);
      font-family: Arial, Helvetica, sans-serif;
  }
  
  .titulo{
      padding: 0.5em;
      color: white;
      text-align: center;
      font-size: 3em;
      font-weight: bold;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  }
  
  .container {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
  }
  
  /*Section*/
  .campo{
      padding: 1em;
      background-color: rgba(255, 255, 255, 0.5);
      width: 80%;
      height: 80%;
      border-radius: 1em;
      box-shadow: 0px 2px 6.35px 0.35px rgba(0, 0, 0, 0.3);
  }
  
  .pesquisa{
      border: none;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      width: 92%;
      padding: 10px;
  }
  
  .btn{
      border: none;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      padding: 10px;
      margin-left: 0em;
      margin-top: 0em;
  }
  
  .btn:hover{
      background-color: rgb(90, 136, 221, 0.3);
  }
  
  #map{    
      width: auto;
      height: 500px;
      border: none;
      border-radius: 1em;
      box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
  }
  
  /*Footer*/
  footer{
      padding: 1em;
      text-align: center;
      color: white;
  }
  
  footer a {
      color: white;
      text-decoration: none;
  }
  
  footer a:hover{
      font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pt-Br"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Leaflet - Nominatim&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="css/estilos.css"&gt;
      &lt;script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;
              &lt;h1 class="titulo"&gt;Maps Leaflet - Nominatim&lt;/h1&gt;
          &lt;/header&gt;
          &lt;section class="campo container"&gt;
              &lt;div class="container"&gt;
                  &lt;input class="pesquisa" type="text"&gt;&lt;input class="btn" type="button" value="Ok!"&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div id="map" class="container"&gt;&lt;/div&gt;
          &lt;/section&gt;
          &lt;footer&gt;&lt;a href="https://github.com/cortelucas"&gt;cortelucas&lt;/a&gt;&lt;/footer&gt;
      &lt;/div&gt;
      &lt;script src="js/map.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>I sincerely ask for your help!</strong></p>