How to add a search box in open layers 3

Question

I tried an example of open layers 3, it only adds a search box but doesn't search for places, below is that code -

<div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px; background-color: rgba(255,255,255,0.5);">
      <input type="text" placeholder="place" style="width: 200px">
      <button type="button">Search</button>
    </div>

This is the other method I tried but, it says "geocoder is undefined", can anyone suggest any other method?

var geocoder = new Geocoder('nominatim', {
  provider: 'mapquest',
  key: 'osm',
  lang: 'pt-BR', //en-US, fr-FR
  placeholder: 'Search for ...',
  targetType: 'text-input',
  limit: 5,
  keepOpen: true
});
map.addControl(geocoder);
geocoder.on('addresschosen', function(evt){
  var feature = evt.feature,
      coord = evt.coordinate,
      address = evt.address;
  // some popup solution
  content.innerHTML = '<p>'+ address.formatted +'</p>';
  overlay.setPosition(coord);
});

Answer 1

It looks like you tried to implement the Geocoder plugin by Jonatas Walker : https://github.com/jonataswalker/ol-geocoder (or has this implemented in the latest version of openlayers? - where did you take this example from?)

In this case, there are two things I think you are missing:

1) Add the css and javascript code in your template or index.html:

<link href="https://cdn.jsdelivr.net/npm/ol-geocoder@latest/dist/ol-geocoder.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>

2) Create an account and Register for a key at Mapquest since this is mandatory for this provider, or try with another provider that doesn't require key, like osm :

var geocoder = new Geocoder('nominatim', {
  provider: 'osm', //change it here
  lang: 'en-US',
  placeholder: 'Search for ...',
  targetType: 'text-input',
  limit: 5,
  keepOpen: true
});

Answer 2

The easiest way is using this library, https://github.com/Viglino/ol-ext , it also comes with a ton of extensions.

Eg of the search box https://viglino.github.io/ol-ext/examples/search/map.control.searchnominatim.html