Mercurial > hg > GlobalNeighbors
view globalneighbors/templates/index.html @ 20:2fef925fbf37
display country + population in autocomplete drop down
author | Jeff Hammel <k0scist@gmail.com> |
---|---|
date | Sun, 25 Jun 2017 16:12:08 -0700 |
parents | 94af113e498a |
children |
line wrap: on
line source
<!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>