First pass autocomplete for picking a country

app/views/home/show.html.erb

@@ -9,7 +9,7 @@
   <div class="content with-related">
     <div class="guidance-headline">
       <h1>Where are you travelling to?</h1>
-      <ul>
+      <ul id="travelling-to">
         <%- @countries.each do |country| -%>
           <li><%= link_to country.name, country_path(country) %></li>
         <%- end -%>
@@ -78,4 +78,6 @@
   	</div>
   </div>
 
-</section>
+</section>
+<script defer src="/fco-assets/javascripts/country-autocomplete.js"></script>
+

public/fco-assets/javascripts/country-autocomplete.js

@@ -0,0 +1,29 @@
+if(!Object.keys) {
+  Object.keys = function(o) {
+    if (o !== Object(o)) {
+      throw new TypeError('Object.keys called on non-object');
+    }
+
+    var ret = [], p;
+    for(p in o) if (Object.prototype.hasOwnProperty.call(o,p)) ret.push(p);
+    return ret;
+  }
+}
+
+$(function() {
+  var available_countries = {};
+  $('#travelling-to li a').each(function () {
+    var this_country = $(this);
+    available_countries[this_country.text()] = this_country.attr('href');
+  });
+
+  $('#travelling-to').before('<input id="country">').hide();
+  $('#country').autocomplete({
+    minLength: 0,
+    source: Object.keys(available_countries),
+    select: function(event, ui) {
+      window.location = available_countries[ui.item.value];
+      return false;
+		}
+  });
+})