Zoom in for selected lands in OpenLayers

Question

I am trying to make a selection from a search result. I managed to make the selection on the map using the code below.

Now my problem is that when I select one or more buildings with the same style, it does not automatically zoom in on the respective lands. I would also like to zoom in on the selected land.

My code:

var extent = ol.extent.createEmpty ();

var selected_stile = new ol.style.Style({
    fill: new ol.style.Fill({color: makePattern()}),
    stroke: new ol.style.Stroke({
      color: [102,255,51], width: 3
    }),
  text: new ol.style.Text({
    font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
    placement: 'center',
    fill: new ol.style.Fill({
      color: 'white', width: 23
    })
  })
});

imobile.getSource().forEachFeature(function(feature){
  feature.setId(feature.get('text'));
  
  var array = id_teren.split(",");
  for (i=0;i<array.length;i++){
    var data = "";
    if($('#etc_tarla').is(":checked")){ data = "T:"+feature.get('tarla')+"  "; }
    if($('#etc_parcela').is(":checked")){ data = data+"P:"+feature.get('parcela')+"  "; }
    if($('#etc_suprafata').is(":checked")){ data = data+"S:"+feature.get('suprafata')+"MP.  "; }
    if($('#etc_proprietari').is(":checked")){ data = data+"P:"+feature.get('proprietari')+"  "; }
    if($('#etc_eterra').is(":checked")){ data = data+"C.F.:"+feature.get('e_terra')+"  "; }

     if(feature.get('text') == array[i]){
        console.log('GASITTTTTTTTTTTTTTTTT');
        var feature = imobile.getSource().getFeatureById(array[i]);
        
        selected_stile.getText().setText(data);
        feature.setStyle(selected_stile);
        ol.extent.extend(extent, feature.getGeometry().getExtent());
        
     }
  }   
});

Answer 1

To zoom map to the desired extent, you can use map view .fit method (see https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit).

If your map object is map, then this would look like this:

map.getView().fit(extent, {size: map.getSize()});