Implementing live filter

templates/tags.html

@@ -5,6 +5,52 @@ All Tags - {{ super() }}
 {% endblock title %}
 
 {% block content %}
+<script>
+(function($) {
+
+    $('.filterinput').keyup(function() {
+        var a = $(this).val();
+        if (a.length > 2) {
+            // this finds all links in the list that contain the input,
+            // and hide the ones not containing the input while showing the ones that do
+            var containing = $('#list li').filter(function () {
+                var regex = new RegExp('\\b' + a, 'i');
+                return regex.test($('a', this).text());
+            }).slideDown();
+            $('#list li').not(containing).slideUp();
+        } else {
+            $('#list li').slideDown();
+        }
+        return false;
+    })
+
+}(jQuery));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// 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;
+};
+
+</script>
 <div class="row-fluid">
     <header class="page_header span7 offset3">
     <h1>All Tags</h1>
@@ -14,7 +60,10 @@ All Tags - {{ super() }}
 
 <div class="row-fluid">
     <div class="span7 offset3">
-        <ul>
+        <form class="form-search">
+            <input type="text" class="input-medium search-query">
+        </form>
+        <ul id="list">
             {% for tag, articles in tags %}
             <li>
             {% set num = articles|count %}