diff globalneighbors/templates/index.html @ 13:94af113e498a

we have links
author Jeff Hammel <k0scist@gmail.com>
date Sun, 25 Jun 2017 14:04:49 -0700
parents 6d89ea94930b
children 2fef925fbf37
line wrap: on
line diff
--- a/globalneighbors/templates/index.html	Sun Jun 25 13:18:13 2017 -0700
+++ b/globalneighbors/templates/index.html	Sun Jun 25 14:04:49 2017 -0700
@@ -3,29 +3,27 @@
   <head>
     <title>Global Neighbors</title>
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
-    <!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> -->
-    <!-- <script> -->
-    <!--   $( function() { -->
-    <!--   $( "#cities" ).autocomplete({ -->
-    <!--   source: "/cities", -->
-    <!--   autoFocus: true, -->
-    <!--   minLength: 3, -->
-    <!--   delay: 1500 -->
-    <!--   }); -->
-    <!--   }); -->
-    <!-- </script> -->
     <script src="/js/jquery.easy-autocomplete.min.js"></script>
     <link rel="stylesheet" type="text/css" href="/css/style.css"/>
     <link rel="stylesheet" type="text/css" href="/css/easy-autocomplete.css"/>
     <script>
       $( function() {
       var options = {
-      url: "/cities",
+      url: function(phrase) {
+      return "/cities?term=" + phrase;
+      },
+      getValue: "name",
       list: {
 		match: {
 			enabled: true
-		}
-	}
+            }
+      },
+      template: {
+        type: "custom",
+        method: function (value, item) {
+          return '<a href="/' + item.geonameid + '">' + value + '</a>';
+        }
+      }
       };
       $( "#cities" ).easyAutocomplete(options);
       });
@@ -38,6 +36,12 @@
     <div class="ui-widget">
       <label for="cities">Enter a city: </label>
       <input id="cities"/>
+      <select>
+        <option value="">ALL</option>
+        {% for country_code in country_codes %}
+        <option value="{{ country_code }}">{{ country_code }}</option>
+        {% endfor %}
+      </select>
     </div>
 
   </body>