Leaflet GeoJSON with Jquery UI autocomplete

Question

How do a autocomplete when I search for something?

I have this:

<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>

Nothing more, just a form with a input text and a buttom. When write anything I need that autocomplete, when find the word click in buttom.

And my Js have:

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

The variable stComercialLayer is a object that generate the mapping layers. setoresComerciais is the same variable in my json (geoSetoresComerciais)

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

and

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

is the autocomplete, but the source, I need a function or a array for work, I think.

The problem is that stComerciaisLayer is a Object and the source just accept type Array, String or Function, conform jquery UI's documentation :( What i need do?

Resuming: I just need that the autocomplete works! My code is on the git:

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

Answer 1

According to the response I received, I needed to map the object so it could return an array, so it looked like this:

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

And work! Now when I find the search value, I need to zoom in on it, but the:

select: function(event, ui){ 
          map.fitBounds(setoresComerciais[ui.item.value].getBounds());
}

Don't work :/ Any idea?