title: OpenLayers 4 - fit to extent of selected features
body: <p>Me again. So, yesterday I faced a bit of a problem with zooming to selected features and I'm hoping that some of you can push me in right direction.Here it goes...</p>
  <p>I'm trying to implement autocomplete/search bar using Materialize <a href="http://materializecss.com/autocomplete.html" rel="nofollow noreferrer">Materialize Framework</a>. (Here is fiddle <a href="https://jsfiddle.net/Svinjica/r1xLd34c/" rel="nofollow noreferrer">example</a> of simple searchbar)</p>
  <pre><code>  $(document).ready(function(){
      $('input.autocomplete').autocomplete({
        data: {
          &quot;Apple&quot;: null,
          &quot;Microsoft&quot;: null,
          &quot;Google&quot;: 'https://placehold.it/250x250'
        },
      });
    });
  </code></pre>
  <p>Now, what I'm trying to do is to call and populate data using geojson features and to implement fit to extent for selected feature. If I'm understanding correctly I need to save extent for selected feature and pass it in with</p>
  <pre><code>map.getView().fit(selectedFeature.getSource().getExtent(), animationOptions);
  </code></pre>
  <p>Or Am I doing this completely wrong?</p>
  <pre><code>$(document).ready(function() {
  function sendItem(val) {
      console.log(val);
  }
  
  var animationOptions = {
      duration: 2000,
      easing: ol.easing.easeOut
  };
  
  $(function() {
      $.ajax({
          type: 'GET',
          url: 'geojson/jls.geojson',
          dataType: 'json',
          success: function(response) {
              var jls_array = response;
              var features = jls_array.features;
              var jls = {};
  
              for (var i = 0; i &lt; features.length; i++) {
                  var geo = features[i].properties;
                  jls[geo['JLS_IME']] = null;
              }
              console.log(jls)
              $('input.autocomplete').autocomplete({
                  data: jls,
                  limit: 5,
                  onAutocomplete: function(txt) {
                      sendItem(txt);
                      map.getView().fit(vectorJLS.getSource().getExtent(), animationOptions);
                  }
              });
          }
      });
  });
  });
  </code></pre>
  <p>And here is example of my geojson object</p>
  <pre><code>{
  &quot;type&quot;: &quot;FeatureCollection&quot;,
  &quot;crs&quot;: { &quot;type&quot;: &quot;name&quot;, &quot;properties&quot;: { &quot;name&quot;:&quot;EPSG:3765&quot; } },
  &quot;features&quot;: [
  { &quot;type&quot;: &quot;Feature&quot;, &quot;properties&quot;: { &quot;JLS_MB&quot;: &quot;00116&quot;, &quot;JLS_IME&quot;: &quot;BEDEKOVČINA&quot;, &quot;JLS_ST&quot;: &quot;OP&quot;, &quot;JLS_SJ&quot;: &quot;Bedekovčina&quot;, &quot;ZU_RB&quot;: &quot;02&quot;, &quot;ZU_IME&quot;: &quot;Krapinsko-zagorska&quot;, &quot;ZU_SJ&quot;: &quot;Krapina&quot;, &quot;pov&quot;: 51.42 }, &quot;geometry&quot;: { &quot;type&quot;: &quot;Polygon&quot;, &quot;coordinates&quot;: [ [ [ 461117.98, 5108379.85 ], [ 461124.53, 5108368.39 ], [ 461132.37, 5108354.26 ]...
  </code></pre>
  <p><strong>UPDATE - SOLUTION</strong></p>
  <p>So, as fellow <strong>Dube</strong> nicely pointed out with logical and practical solution where he's finding feature and zooming selected feature within geojson layer source with simple .find() method.</p>
  <p>I only tweaked a bit existing code with added variable before ajax call</p>
  <pre><code>var source_layer = vectorJLS.getSource(); // collecting layer source
  
  $(function() {
      $.ajax({
          type: 'GET',
          url: 'geojson/jls.geojson',
          dataType: 'json'.....
  
  onAutocomplete: function(txt) {
    var feature = source_layer.getFeatures().find(function(f) { return f.get('JLS_IME') === txt; });
    if (feature) {
      const extent = feature.getGeometry().getExtent()
      map.getView().fit(extent);
    }
  };
  </code></pre>
  <p>Here is layer that I'm trying to iterate and on select to zoom on feature</p>