我試圖使用本頁上的Leaflet Geosearch插件，讓一個用于搜索地址的常規表單欄位自動完成其值。
到目前為止，檔案中說它可以被系結到一個表單。Jquery UI 的自動完成功能看起來可以實作這一目標，但是我還沒有弄清楚如何實作這一目標。
我已經成功地將表單欄位鏈接到地理搜索提供者，并且它回傳一個陣列，可以在瀏覽器控制臺中看到。我可以讓自動完成插件作業，但使用的是一個本地陣列，而不是由地理搜索插件產生的陣列。
下面是兩個插件分別運行的例子：
。<!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="styleheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"> </script>>
<style type="text/css"/span>> #mapid { height: 500px; width: 500px}</style>
< link rel="styleheet" href="https://unpkg.com/[email protected]/dist/geosearch.css"/>
<script src="https://unpkg.com/[email protected]/dist/geosearch.umd.js"> </script>>
</head>
<body>
<div id="mapid"/span>> </div>>
<hr>
<div class="">
<label for="搜索">geosearch領域（檢查控制臺）。</label>geosearch欄位（檢查控制臺）。
<input id="search">/span>
</div>/span>
<div class="">
<label for="search2">自動完成領域（蘋果或香蕉）。</label>自動完成欄位（蘋果或香蕉）。
<input id="search2">/span>
</div>/span>
<script type="text/javascript">/span>
//下面是生成地圖的代碼。
var mymap = L.map('mapid') 。 setView([51.505, -0.09], 13) 。
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'/span>, {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'。
子域: ['a'/span>,'b'/span>,'c'/span>]
}).addTo（mymap）。
//下面是搜索表單的代碼。
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]); // " [{}, {}, {}, ...]/span>
});
//
let fruits = ['Apple'/span>, 'Banana'/span>]
$("#search2").autocomplete(
{
source: fruits,
delay: 100,
minLength: 1: minLength.
});
</script>>
</body>
</html>/span>我非常感謝任何關于如何讓自動完成功能與地理搜索提供者一起作業的正確方向的指點。
uj5u.com熱心網友回復：
這應該是可行的，但我目前不知道如何檢查，因為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。
});uj5u.com熱心網友回復：
這里是一個使用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]); // " [{}, {}, {}, ...]/span>
});
let fruits = ['Apple'/span>, 'Banana'/span>]
$("#search2").autocomplete(
{
source: fruits,
delay: 100,
minLength: 1。
});<html lang="en"> /span>
<head>/span>
<meta charset="utf-8">/span>
<link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="styleheet" 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=""/span>>
<label for="search2">自動完成領域（蘋果或香蕉）。</label>自動完成欄位（蘋果或香蕉）。
<input id="search2">/span>
</div>/span>
<script type="text/javascript"/span>>
</script>/span>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/319918.html
標籤：
上一篇：無法獲得下拉的前一個值