How do a autocomplete when I search for something?

I have this:

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

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

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

      "type": "FeatureCollection",
      "totalFeatures": 116,
      "features": [


                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:



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

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

Don't work :/ Any idea?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.