Search feature by attribute and show centered on map in OpenLayers?

Question

I have a layer in OpenLayers and I would like that, when clicked to become visible, it shows a text box or something similar, so that the user can enter a code.

Then, when the layer is shown on the map, show the layer with the feature with the searched code highlighted in a zoom 18. Any idea?

    var my_layer = new ol.layer.Vector({
    title: 'Quadra Fiscal',
    visible: false,
    style: my_style,
    }),
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent) {
          return urlGeoserver +'wfs?service=WFS&' +
              'version='+versionGeoserver+'&request=GetFeature&typename=geo:MY_LAYER&' +
              'outputFormat=application/json&srsname=EPSG:4326&' +
              'all=' + extent.join(',') + ',EPSG:4326';
        },
        strategy: ol.loadingstrategy.all
    })
});

my_layer.on('change:visible', function(){ 
    if (my_layer.getVisible() == true){
        if (map.getView().getZoom() >= 17) {
            alert('zoom ok')
            /*my_layer.getSource().forEachFeature(function (feature) {
                //HERE: if feature.get(COD) equals code entered, center to that feature
            });*/               
        } else {
            alert('Verify  the zoom')
            my_layer.setVisible(false)
        } 
        
    }   
})

Answer 1

The general idea is:

Create the text input field with a HTML ID attribute. On change of the textbox get its contents (via document.getElementById(...).value ). Iterate over the layer features, if your attribute value matches the input field value get the feature, apply a specific style to it (to mark it as selected) and zoom and pan to its centroid.