Zoom in on the value found after searching

Question

Hello! I am developing a map here and I have a search field and a map with the layers. I am using leaflet and the search I am doing customized, because the plugin does not meet my needs. I’m having trouble zooming in after finding what I’m looking for. Example: I searched a neighborhood and when I found to zoom in on its location. Before the explanations, follow what I have already done:

 stComerciaisLayer = L.geoJSON(setoresComerciais, {
    style: function (feature) {
            return feature.properties && feature.properties.style;
 },

Here the variable stComerciaisLayer stores the json that contains all the data

$("#txtSearch").autocomplete({
                source: setoresComerciais.features.map(function(d){
                    return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc
    }),
    select: function(event, ui){
        map.fitBounds(stComerciaisLayer.getBounds(ui.item.value));
    } 
});

The search is working 100%, is searching, autocomplete and is finding the value, the problem is time to zoom in on the value sought. When I make a console.log(ui.item.value) the result is the searched value that corresponds to the return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc

What am I doing wrong and how can I make this zoom work? And if possible they can explain me, because I can’t understand the mistake. My code is in my repository:

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

Thank you!

Answer 1

Opa I managed to solve, to whom if interested and have going through the same problem, here is my solution:

$("#txtSearch").autocomplete({
    source: setoresComerciais.features.map(function(d,i){
        return {
           label: d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc,
           id: i
        };
    }),
    select: function(event, ui){
        var featureLayer = L.geoJSON(setoresComerciais.features[ui.item.id]);
        map.fitBounds(featureLayer.getBounds());
    } 
});

I just needed to pass another "i" parameter that will serve to store the id value of the searched area. Then, with the result I return it with ui.item.id, remembering that ui.item label or value returns the value found in the search. And then it’s simple, map.fitBounds to focus somewhere found getting the featuresLayer.getBounds parameter just to focus where I want. And that’s it! If there are any questions just in the comment, if you like the answer, please mark it as the correct answer and place it!