javascript - 带有 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);

变量 stComercialLayer 是一个生成映射层的对象。 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 允许使用迭代特征数组，该函数接受一个参数(数组中的一项)并允许我们将值返回到新数组中(因为数组由 .map() 返回)。

我随机选择了一个属性(有重复项，您可以相对轻松地删除它们，但我想您会选择每个标记唯一的属性)。