add filter

handshakes-dl.py

@@ -18,7 +18,43 @@ TEMPLATE = """
     {{ title }}
 {% endblock %}
 
+{% block styles %}
+    {{ super() }}
+    <style>
+        #filter {
+            width: 100%;
+            font-size: 16px;
+            padding: 12px 20px 12px 40px;
+            border: 1px solid #ddd;
+            margin-bottom: 12px;
+        }
+    </style>
+{% endblock %}
+{% block script %}
+    var shakeList = document.getElementById('list');
+    var filter = document.getElementById('filter');
+    var filterVal = filter.value.toUpperCase();
+
+    filter.onkeyup = function() {
+        document.body.style.cursor = 'progress';
+        var table, tr, tds, td, i, txtValue;
+        filterVal = filter.value.toUpperCase();
+        li = shakeList.getElementsByTagName("li");
+        for (i = 0; i < li.length; i++) {
+            txtValue = li[i].textContent || li[i].innerText;
+            if (txtValue.toUpperCase().indexOf(filterVal) > -1) {
+                li[i].style.display = "list-item";
+            } else {
+                li[i].style.display = "none";
+            }
+        }
+        document.body.style.cursor = 'default';
+    }
+
+{% endblock %}
+
 {% block content %}
+    <input type="text" id="filter" placeholder="Search for ..." title="Type in a filter">
     <ul id="list" data-role="listview" style="list-style-type:disc;">
         {% for handshake in handshakes %}
             <li class="file">