Add search field for countries in downloads section

_sass/_custom.scss

@@ -125,4 +125,11 @@ body{
       }
     }
   }
+}
+
+#searchField {
+  height: 2.5em;
+  line-height: 2.5em;
+  padding: 0 8px;
+  font-size: 1em;
 }

downloads.md

@@ -33,6 +33,8 @@ City extracts are limited to the boundaries of a city and do not allow zooming o
 All country extracts consist of a bounding box of the country containing all details down to zoom level 14.
 At lower zoom levels there is still some world data to make maps look good.
 
+<input type="text" id="searchField" placeholder="Switzerland" alt="Search countries"/>
+
 - [Afghanistan](https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/afghanistan.mbtiles)
 - [Albania](https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/albania.mbtiles)
 - [Algeria](https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/algeria.mbtiles)

js/index.js

@@ -40,6 +40,20 @@ function init() {
     };
   }
 
+  /* Search field in downloads section */
+  var searchField = document.querySelector('#searchField');
+  searchField.onkeyup = function() {
+    var searchText = searchField.value.toLowerCase();
+    var countries = document.querySelector('#searchField').parentNode.nextElementSibling.children;
+    for(var i = 0; i <= countries.length - 1; ++i) {
+      var element = countries[i];
+      var countryName = element.textContent.toLowerCase();
+      if(!( countryName.indexOf(searchText) != -1 )) {
+        element.style.display = 'none';
+      } else {
+        element.style.display = 'list-item';
+      }
+    }
+  }
 }
-
 window.onload = init;