tags.html 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE HTML>
  2. {% extends "base.html" %}
  3. {% block head %}
  4. {{ super() }}
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  6. <script>
  7. (function ($) {
  8. // custom css expression for a case-insensitive contains()
  9. jQuery.expr[':'].Contains = function(a,i,m){
  10. return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  11. };
  12. function listFilter() {
  13. $('.filterinput')
  14. .change( function () {
  15. var filter = $(this).val();
  16. if(filter) {
  17. // this finds all links in a list that contain the input,
  18. // and hide the ones not containing the input while showing the ones that do
  19. $('#list-of-tags').find("a:not(:Contains(" + filter + "))").parent().slideUp();
  20. $('#list-of-tags').find("a:Contains(" + filter + ")").parent().slideDown();
  21. } else {
  22. $('#list-of-tags').find("li").slideDown();
  23. }
  24. return false;
  25. })
  26. .keyup( function () {
  27. // fire the above change event after every letter
  28. $(this).change();
  29. });
  30. }
  31. //ondomready
  32. $(function () {
  33. listFilter($());
  34. });
  35. }(jQuery));
  36. </script>
  37. {% endblock head %}
  38. {% block content %}
  39. <h1 id="header">List of countries</h1>
  40. <form class="form-search">
  41. <input type="text" class="input-medium search-query filterinput">
  42. </form>
  43. <ul id="list-of-tags">
  44. <li><a href="#/australia/">Australia</a></li>
  45. <li><a href="#/austria/">Austria</a></li>
  46. <li><a href="#/belgium/">Belgium</a></li>
  47. <li><a href="#/brazil/">Brazil</a></li>
  48. <li><a href="#/canada/">Canada</a></li>
  49. <li><a href="#/denmark/">Denmark</a></li>
  50. <li><a href="#/finland/">Finland</a></li>
  51. <li><a href="#/france/">France</a></li>
  52. <li><a href="#/germany/">Germany</a></li>
  53. <li><a href="#/greece/">Greece</a></li>
  54. <li><a href="#/ireland/">Ireland</a></li>
  55. <li><a href="#/israel/">Israel</a></li>
  56. <li><a href="#/italy/">Italy</a></li>
  57. <li><a href="#/japan/">Japan</a></li>
  58. <li><a href="#/luxembourg/">Luxembourg</a></li>
  59. <li><a href="#/mexico/">Mexico</a></li>
  60. <li><a href="#/netherlands/">Netherlands</a></li>
  61. <li><a href="#/norway/">Norway</a></li>
  62. <li><a href="#/poland/">Poland</a></li>
  63. <li><a href="#/portugal/">Portugal</a></li>
  64. <li><a href="#/russia/">Russia</a></li>
  65. <li><a href="#/spain/">Spain</a></li>
  66. <li><a href="#/sweden/">Sweden</a></li>
  67. <li><a href="#/switzerland/">Switzerland</a></li>
  68. <li><a href="#/turkey/">Turkey</a></li>
  69. <li><a href="#/united-kingdom/">United Kingdom</a></li>
  70. <li><a href="#/united-states/">United States</a></li>
  71. </ul>
  72. {% endblock content %}