如何使用 Leaflet 的 Geosearch 插件获取常规表单字段以自动完成地理搜索？

Question

我正在尝试获取用于搜索地址以自动完成其值的常规表单字段，如 this page, using Leaflet Geosearch 插件所示。

到目前为止，文档说它可以绑定到一个表单。 Jquery UI 的自动完成功能看起来可以做到这一点，但是我还没有想好如何去做。

我已成功将表单字段链接到地理搜索提供程序，它 returns 是一个可以在浏览器控制台中看到的数组。我可以通过算法让自动完成插件工作，但使用本地数组，而不是 geosearch 插件生成的数组。

这是两个插件分别运行的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet tests</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style type="text/css"> #mapid { height: 500px; width: 500px}</style>

<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.0.0/dist/geosearch.css" />
<script src="https://unpkg.com/leaflet-geosearch@3.0.0/dist/geosearch.umd.js"></script>
</head>
<body>
 <div id="mapid"></div>

<hr>

<div class="">
  <label for="search">geosearch field (check console): </label>
  <input id="search">
</div>

<div class="">
  <label for="search2">autocomplete field (apple or banana): </label>
  <input id="search2">
</div>

 <script type="text/javascript">
 //code for generating map below
 var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ['a','b','c']
}).addTo(mymap);

//code for search form below
const providerform = new GeoSearch.OpenStreetMapProvider();
const input = document.querySelector('input[id="search"]');
input.addEventListener('input', async (event) => {
  const results = await providerform.search({ query: input.value });
  console.log(results[0]); // » [{}, {}, {}, ...]
});
//
let fruits = ['Apple', 'Banana']

$("#search2").autocomplete(
    {
        source: fruits,
        delay: 100,
        minLength: 1
    });
 </script>
</body>
</html>

对于如何让自动完成功能与地理搜索提供商一起工作的正确方向的任何指示，我将不胜感激。

Answer 1

这是一个使用 jquery 的基本示例，还有其他选项

const input = document.querySelector('input[id="search2"]');
input.addEventListener('input', async (event) => {
  const results = await providerform.search({ query: input.value });
  console.log(results[0]); // » [{}, {}, {}, ...]
});

let fruits = ['Apple', 'Banana']

$("#search2").autocomplete(
    {
        source: fruits,
        delay: 100,
        minLength: 1
    });

<html lang="en">
<head>
  <meta charset="utf-8">
  
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <link rel="stylesheet" href="//code.jquery.com/resources/demos/style.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<hr>
<h1> Autocomplerde demo </h1>

<div class="">
  <label for="search2">autocomplete field (apple or banana): </label>
  <input id="search2">
</div>
 
 <script type="text/javascript">
 
 </script>
</body>
</html>

Answer 2

这应该可以，但我目前不知道如何检查，因为 https://nominatim.openstreetmap.org/ 目前无法正常工作。

$('#search2').autocomplete({
  source(request, response) {
    const providerform = new GeoSearch.OpenStreetMapProvider({
      params: {
        limit: 5
      }
    });
    return providerform.search({ query: request.term }).then(function (results) {
      response(results);
    });
  },
  delay: 100,
  minLength: 1
});

如何使用 Leaflet 的 Geosearch 插件获取常规表单字段以自动完成地理搜索？

How to get a regular form field to autocomplete a geosearch with Leaflet's Geosearch plugin?

javascript

jquery

jquery-ui

leaflet