title: Uncaught TypeError: Cannot read property 'hide' of undefined at HTMLButtonElement.toogleHideShowInput (ol3-search-layer.js:32)
body: <p>I'm developing an application that includes a openstreetmap. On the map I added a search layer. <br/>
  This works normally in the dextop version but when I work with the mobile version and click on the search button I have the following console error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'hide' of undefined at
    HTMLButtonElement.toogleHideShowInput (ol3-search-layer.js:32)</p>
  </blockquote>
  
  <p>Below I enclose the javascript code for the operation of the search.</p>
  
  <p>Can someone help me?</p>
  
  <pre><code>(function(f){if(typeof exports==="object"&amp;&amp;typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&amp;&amp;define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}(g.ol || (g.ol = {})).SearchLayer = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&amp;&amp;require;if(!u&amp;&amp;a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&amp;&amp;require;for(var o=0;o&lt;r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  var utils = require('./utils');
  
  function SearchLayer(optOptions) {
    var horseyComponent;
    var select;
    var options = optOptions || {};
    if (optOptions.layer) {
      options.layer = optOptions.layer;
    } else {
      throw new Error('error');
    }
    options.map = optOptions.map;
  
    var source;
    if (options.layer instanceof ol.layer.Image &amp;&amp;
        options.layer.getSource() instanceof ol.source.ImageVector) {
      source = options.layer.getSource().getSource();
    } else if (options.layer instanceof ol.layer.Vector) {
      source = options.layer.getSource();
    }
    options.colName = optOptions.colName;
  
    var button = document.createElement('button');
    var toogleHideShowInput = function() {
      var input = document.querySelector('form &gt; .search-layer-input-search');
      if (utils.hasClass(input, 'search-layer-collapsed')) {
        utils.removeClass(input, 'search-layer-collapsed');
      } else {
        input.value = '';
        utils.addClass(input, 'search-layer-collapsed');
        horseyComponent.hide();
        select.getFeatures().clear();
      }
    };
  
    button.addEventListener('click', toogleHideShowInput, false);
    button.addEventListener('touchstart', toogleHideShowInput, false);
  
    var form = document.createElement('form');
    form.setAttribute('id', 'random');
    form.onsubmit = function(){return false};
    // form.setAttribute('action', 'javascript:void(0);');
  
    var input = document.createElement('input');
    input.setAttribute('id', 'ol-search-input');
    var defaultInputClass = ['search-layer-input-search'];
    if (optOptions.collapsed) {
      defaultInputClass.push('search-layer-collapsed');
    }
    input.setAttribute('class', defaultInputClass.join(' '));
    input.setAttribute('placeholder', 'Search ...');
    input.setAttribute('type', 'text');
  
    form.appendChild(input);
  
    var element = document.createElement('div');
    element.className = 'search-layer ol-unselectable ol-control';
  
    element.appendChild(button);
    element.appendChild(form);
  
    ol.control.Control.call(this, {
      element: element,
      target: options.target
    });
  
    select = new ol.interaction.Select({
      id: options.selectId || 'defaultSearchLayer',
      layers: [options.layer],
      condition: ol.events.condition.never
    });
  
    var map = options.map;
  
    map.addInteraction(select);
  
    var typesToZoomToExtent = [
      'MultiPoint',
      'LineString',
      'MultiLineString',
      'MultiPolygon',
      'Polygon'
    ];
  
    var typesToZoomToCenterAndZoom = [
      'Point'
    ];
    var returnHorsey = function(input, source, map, select, options) {
      horsey(input, {
        source: [{
          list: source.getFeatures().map(function(el, i) {
            if (el.getId() === undefined) {
              el.setId(i);
            }
            return {
              text: el.get(options.colName),
              value: el.getId() // If GeoJSON has an id
            };
          })
        }],
        getText: 'text',
        getValue: 'value',
        predictNextSearch: function(info) {
          var feat = source.getFeatureById(info.selection.value);
          var featType = feat.getGeometry().getType();
          if (typesToZoomToCenterAndZoom.indexOf(featType) !== -1) {
            var newCenter = ol.extent.getCenter(feat.getGeometry().getExtent());
            map.getView().setCenter(newCenter);
            map.getView().setZoom(options.zoom || 12);
          } else if (typesToZoomToExtent.indexOf(featType) !== -1) {
            map.getView().fit(feat.getGeometry().getExtent(), map.getSize());
          }
  
          select.getFeatures().clear();
          select.getFeatures().push(feat);
        }
      });
    }
    if (source.getState() === 'ready') {
      horseyComponent = returnHorsey(input, source, map, select, options);
    }
    source.once('change', function(e) {
      if (source.getState() === 'ready') {
        horseyComponent = returnHorsey(input, source, map, select, options);
      }
    });
  }
  
  ol.inherits(SearchLayer, ol.control.Control);
  
  module.exports = SearchLayer;
  
  },{"./utils":2}],2:[function(require,module,exports){
  'use strict';
  
  function hasClass(el, cls) {
    return el.className &amp;&amp; new RegExp('(\\s|^)' +
      cls + '(\\s|$)').test(el.className);
  }
  
  function addClass(elem, className) {
    if (!hasClass(elem, className)) {
      elem.className += ' ' + className;
    }
  }
  
  function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
      while (newClass.indexOf(' ' + className + ' ') &gt;= 0) {
        newClass = newClass.replace(' ' + className + ' ', ' ');
      }
      elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
  }
  
  module.exports = {
    addClass: addClass,
    hasClass: hasClass,
    removeClass: removeClass
  };
  
  },{}]},{},[1])(1)
  });
  </code></pre>