1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <!DOCTYPE HTML>
- {% extends "base.html" %}
- {% block head %}
- {{ super() }}
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script>
- (function ($) {
- // custom css expression for a case-insensitive contains()
- jQuery.expr[':'].Contains = function(a,i,m){
- return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
- };
- function listFilter() {
- $('.filterinput')
- .change( function () {
- var filter = $(this).val();
- if(filter) {
- // this finds all links in a list that contain the input,
- // and hide the ones not containing the input while showing the ones that do
- $('#list-of-tags').find("a:not(:Contains(" + filter + "))").parent().slideUp();
- $('#list-of-tags').find("a:Contains(" + filter + ")").parent().slideDown();
- } else {
- $('#list-of-tags').find("li").slideDown();
- }
- return false;
- })
- .keyup( function () {
- // fire the above change event after every letter
- $(this).change();
- });
- }
- //ondomready
- $(function () {
- listFilter($());
- });
- }(jQuery));
- </script>
- {% endblock head %}
- {% block content %}
- <h1 id="header">List of countries</h1>
- <form class="form-search">
- <input type="text" class="input-medium search-query filterinput">
- </form>
- <ul id="list-of-tags">
- <li><a href="#/australia/">Australia</a></li>
- <li><a href="#/austria/">Austria</a></li>
- <li><a href="#/belgium/">Belgium</a></li>
- <li><a href="#/brazil/">Brazil</a></li>
- <li><a href="#/canada/">Canada</a></li>
- <li><a href="#/denmark/">Denmark</a></li>
- <li><a href="#/finland/">Finland</a></li>
- <li><a href="#/france/">France</a></li>
- <li><a href="#/germany/">Germany</a></li>
- <li><a href="#/greece/">Greece</a></li>
- <li><a href="#/ireland/">Ireland</a></li>
- <li><a href="#/israel/">Israel</a></li>
- <li><a href="#/italy/">Italy</a></li>
- <li><a href="#/japan/">Japan</a></li>
- <li><a href="#/luxembourg/">Luxembourg</a></li>
- <li><a href="#/mexico/">Mexico</a></li>
- <li><a href="#/netherlands/">Netherlands</a></li>
- <li><a href="#/norway/">Norway</a></li>
- <li><a href="#/poland/">Poland</a></li>
- <li><a href="#/portugal/">Portugal</a></li>
- <li><a href="#/russia/">Russia</a></li>
- <li><a href="#/spain/">Spain</a></li>
- <li><a href="#/sweden/">Sweden</a></li>
- <li><a href="#/switzerland/">Switzerland</a></li>
- <li><a href="#/turkey/">Turkey</a></li>
- <li><a href="#/united-kingdom/">United Kingdom</a></li>
- <li><a href="#/united-states/">United States</a></li>
- </ul>
- {% endblock content %}
|