Mercurial > hg > GlobalNeighbors

<!DOCTYPE html>
<html>
  <head>
    <title>Global Neighbors</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></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: function(phrase) {
      return "/cities?term=" + phrase;
      },
      getValue: "name",
      list: {
		match: {
			enabled: true
            }
      },
      template: {
        type: "custom",
        method: function (value, item) {
          return '<a href="/' + item.geonameid + '"><b>' + value + '</b> ' + item["country code"] + '<br/><small>Population: ' + item.population + '</small></a>';
        }
      }
      };
      $( "#cities" ).easyAutocomplete(options);
      });
    </script>
  </head>
  <body>
    <h1>Global Neighbors</h1>
    <h2>Serving {{ n_cities }} cities</h2>

    <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>
</html>
author	Jeff Hammel <k0scist@gmail.com>
date	Mon, 04 Sep 2017 14:54:38 -0700
parents	2fef925fbf37
children