如何获得一个常规表单字段，以便使用传单的geosearch插件自动完成geosearch？

eoxn13cs 于 2021-09-29 发布在 Java

关注(0)|答案(2)|浏览(322)

我正在尝试使用传单geosearch插件获取一个用于搜索地址以自动完成其值的常规表单字段，如本页所示。
到目前为止，文档说它可以绑定到表单上。jQueryUI的自动完成功能看起来可以做到这一点，但是我还不知道该怎么做。
我已经成功地将表单字段链接到geosearch提供程序，它返回一个可以在浏览器控制台中看到的数组。我可以让自动完成插件运行，但是使用本地数组，而不是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>

我非常感谢任何关于如何让自动完成与geosearch提供商合作的正确方向的建议。

jquery JavaScript jquery-ui leaflet

来源：https://stackoverflow.com/questions/68539535/how-to-get-a-regular-form-field-to-autocomplete-a-geosearch-with-leaflets-geose

2条答案

按热度按时间

yqyhoc1h1#

这里有一个使用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>

赞(0）回复(0）举报 2021-09-29

5ktev3wc2#

这应该行得通，但我现在不知道如何检查，因为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
});

赞(0）回复(0）举报 2021-09-29

我来回答

如何获得一个常规表单字段，以便使用传单的geosearch插件自动完成geosearch？

2条答案

相关问题

热门标签

最新问答