Adapt existing JS to finish searching (Closes #119)

- search function does the filtering
- triggered on keyup of each search field

go/static/js/useradmin.js

-//Zosman- This file was created in an effort to make /useradmin more usable. As a responce to issue #119 ; branch 119-search-bar ;
-//At the time this was created we had no searching feature of the users and it became somewhat hard to actually manage users
-//This file has three js functions, one for each table in /useradmin , the functions allow a user to search through the table
+/**
+ * Filters a html table by hiding rows that do not contain the input string.
+ * @param {html table} table - The table that we are searching through 
+ * @param {String} input - The string we are searching through 
+ */
+function searchAndFilter(table, input) {
+    // Cleanup the input search filter param
+    let val = $.trim($(input).val()).replace(/ +/g, ' ').toLowerCase();
 
-function filterApplied() {
-    var input, filter, table, tr, td, i;
-    input = document.getElementById("appliedInput"); 
-    // the var that holdes input from text box
-    filter = input.value.toUpperCase();
-     //makes the input all uppercase so we dont have problems with case insensitivity
-    table = document.getElementById("appliedTable"); 
-    // the table at the moment this is called
-    tr = table.getElementsByTagName("tr"); 
-    //the table rows
-    for (i = 1; i < tr.length; i++) { 
-        // loops through the table rows
-        td = (tr[i].getElementsByTagName("td")[1] || tr[i].getElementsByTagName("td")[2]);
-         //sets td to the element, gets changed evrey loop itteration
-        if (td) {
-            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
-                tr[i].style.display = "";
-            } else {
-                tr[i].style.display = "none";
-                // tr[1].style.display = "No results match your search! ¯\\_(ツ)_/¯"
-            }
-        }
-    }
+    // Filter the table rows based on the input string
+    table.show().filter(function () {
+        let text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
+        return !~text.indexOf(val);
+    }).hide();
 }
 
-function filterBlocked() {
-    var input, filter, table, tr, td, i;
-    input = document.getElementById("blockedInput"); 
-    // the var that holdes input from text box
-    filter = input.value.toUpperCase(); 
-    //makes the input all uppercase so we dont have problems with case insensitivity
-    table = document.getElementById("blockedTable"); 
-    // the table at the moment this is called
-    tr = table.getElementsByTagName("tr"); 
-    //the table rows
-    for (i = 1; i < tr.length; i++) { 
-        // loops through the table rows
-        td = (tr[i].getElementsByTagName("td")[1] || tr[i].getElementsByTagName("td")[2]); 
-        //sets td to the element, gets changed evrey loop itteration
-        if (td) {
-            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
-                tr[i].style.display = "";
-            } else {
-                tr[i].style.display = "none";
-                // tr[1].style.display = "No results match your search! ¯\\_(ツ)_/¯"
-            }
-        }
-    }
-}
+// Grab the applied table
+const $applied = $('#appliedTable tr:not(:first)');
+
+$('#appliedInput').keyup(function () {
+    searchAndFilter($applied, this);
+});
+
+// Grab the blocked table
+const $blocked = $('#blockedTable tr:not(:first)');
+
+$('#blockedInput').keyup(function () {
+    searchAndFilter($blocked, this);
+});
+
+// Grab the current table
+const $current = $('#currentTable tr:not(:first)');
+
+$('#currentInput').keyup(function () {
+    searchAndFilter($current, this);
+});
 
-function filterCurrent() {
-    var input, filter, table, tr, td, i;
-    input = document.getElementById("currentInput");
-     // the var that holdes input from text box
-    filter = input.value.toUpperCase();
-     //makes the input all uppercase so we dont have problems with case insensitivity
-    table = document.getElementById("currentTable"); 
-    // the table at the moment this is called
-    tr = table.getElementsByTagName("tr"); 
-    //the table rows
-    for (i = 1; i < tr.length; i++) { 
-        // loops through the table rows
-        td = (tr[i].getElementsByTagName("td")[1] || tr[i].getElementsByTagName("td")[2]);
-         //sets td to the element, gets changed evrey loop itteration
-        if (td) {
-            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
-                tr[i].style.display = "";
-            } else {
-                tr[i].style.display = "none";
-                // tr[1].style.display = "No results match your search! ¯\\_(ツ)_/¯"
-            }
-        }
-    }
-}