具有 Jquery UI 自动完成功能的 Leaflet GeoJSON

Question

我有问题。我搜索内容时如何自动完成？

我有这个：

<form>
    <div class="col-sm-11">
        <input type="text" name="busca" id="txtSearch" class="form-control" placeholder="Buscar..." />
    </div>
        <button class="btn btn-default" id="btnSearch"><i class="fa fa-search"></i></button>
</form>

仅此而已，只是一个带有输入文本和按钮的表单。当我写任何东西时我需要自动完成，当找到单词时点击按钮。

我的 Js 有：

stComerciaisLayer = L.geoJSON(setoresComerciais, {
                style: function (feature) {
                    ...
                },
                onEachFeature: onEachFeature
            }).addTo(map);

变量stCommercialLayer是生成映射层的对象。 setoresComerciais 与我的 json (geoSetoresComerciais)

中的变量相同

    setoresComerciais={
      "type": "FeatureCollection",
      "totalFeatures": 116,
      "features": [
        {
         (...)

和

$("#txtSearch").autocomplete({
                source: setoresComerciais
            });

是自动完成，但是源代码，我想我需要一个函数或一个数组来工作。

问题是 stComerciaisLayer 是一个对象，源只接受数组、字符串或函数类型，符合 jquery UI 的文档:( 我需要做什么？

正在恢复：我只需要自动完成功能即可！我的代码在 git:

https://github.com/eltonsantos/leaflet-tests/tree/master/teste2

谢谢！！

Answer 1

是的，你是对的，你应该将一个数组传递给下面的源：

$("#txtSearch").autocomplete({
                source: setoresComerciais
            });

正如您所注意到的，setoresComerciais 是一个 geojson 对象。但是，此 geojson 中包含一系列功能，我们可以使用它来使自动更正工作。

因为您的 geojson 是一个要素集合：type:"FeatureCollection"，您所有的要素都位于 setoresComerciais.features（一个数组）中。每个特征也是一个对象，但是如果我们使用 array.map() 遍历此数组中的每个特征，我们可以获得一个数组，其中每个特征包含一个字符串，您可以将其用于自动完成功能：

$("#txtSearch").autocomplete({
    source: setoresComerciais.features.map(function(d) { return d.properties.sco_dsc_sa; })
});

.map 允许使用迭代特征数组，该函数接受一个参数（数组中的一项）并允许我们将 return 一个值放入新数组（因为数组是 return由 .map())编辑。

我随机选择了一个属性（有重复的，你可以相对容易地删除它们，但我想你会选择每个标记唯一的属性）。

具有 Jquery UI 自动完成功能的 Leaflet GeoJSON

Leaflet GeoJSON with Jquery UI autocomplete

javascript

jquery-ui

autocomplete

geojson

leaflet