div 地图外的传单输入搜索（重新制作）

Question

我有一个小问题，我正在处理 Leaflet 地图，但我不知道我该怎么做我的输入搜索，显示与地图内的输入搜索相同的结果，我一直在寻找答案和一些例子，即使在同一份传单文档中，我也找不到任何清楚的地方，我希望你能帮助我。 Js 代码，在地图上创建输入搜索，但我需要在地图外进行输入搜索。

<input id="search" type="search" class="sb-search-input" name="Search" autocomplete="off" placeholder="Enter your search term..." id="search" required=""/>
<div id="mapid" class="col-md-12" style="height: 400px;"></div>


      let map = L.map("mapid").setView([-33.45, -70.666667], 4);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

var searchText = L.esri.Geocoding.geosearch().addTo(map);

//adding layer groups on the search control
var results = L.layerGroup().addTo(map);

searchText.on("results", function (data) {
  results.clearLayers();

  for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng));

    console.log(data.results[i].latlng);
  }
});

Answer 1

谢谢大家哈哈，我可以做到，但现在的问题是我的混乱 bootstrap，好吧，无论如何，这就是解决方案。

var searchText = L.esri.BootstrapGeocoder.search({  
 //here we call the input id.
  inputTag: 'search',
  placeholder: 'ex. LAX',
}).addTo(map);
//adding layer groups on the search control
var results = L.layerGroup().addTo(map);

searchText.on('results', function(data){

  results.clearLayers();

  for (var i = data.results.length - 1; i >= 0; i--) {

    results.addLayer(L.marker(data.results[i].latlng));    
    console.log(data.results[i].latlng);
  }
})

div 地图外的传单输入搜索（重新制作）

leaflet input search outside of the div map (re-make)

html

javascript

search-box

leaflet