Allow basic searching of users and events

Issue: #12
Signed-Off-By: Cara Salter <cara@devcara.com>

acmsite/static/js/tableutils.js

@@ -0,0 +1,12 @@
+var $rows = $('#searchable tr');
+$('#search').keyup(function() {
+
+    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
+        reg = RegExp(val, 'i'),
+        text;
+
+    $rows.show().filter(function() {
+        text = $(this).text().replace(/\s+/g, ' ');
+        return !reg.test(text);
+    }).hide();
+});

acmsite/templates/admin/events.html

@@ -4,6 +4,11 @@
 {% block app_content %}
 <h1>Event list</h1> 
 
+<div class="mt-2">
+<label for="search">Search</label>
+<input type="text" id="search" class="form-control w-25"/>
+</div>
+
 <table class="table table-striped">
    <thead>
         <tr>
@@ -15,7 +20,7 @@
                     data-bs-target="#editModal" data-id="0">New</button></th>
         </tr>
    </thead> 
-    <tbody>
+    <tbody id="searchable">
         {% for e in e_list %}
             <tr>
                 <td>{{ e.name }}</td>
@@ -126,6 +131,7 @@
     </div>
 </div>
 <script src="{{ url_for('static', filename='js/jquery-3.6.3.min.js') }}" charset="utf-8"></script>
+<script src="{{ url_for('static', filename='js/tableutils.js') }}"></script>
 <script charset="utf-8">
     const deleteButton = document.getElementById("delete")
     const editButton = document.getElementById("edit-save")

acmsite/templates/admin/users.html

@@ -2,7 +2,13 @@
 
 {% block app_content %}
 <h1>Member List</h1> 
+<div>
 <a href="{{ url_for('admin.users_csv') }}" target="_blank">CSV for ACM</a>
+</div>
+<div class="mt-2">
+<label for="search">Search</label>
+<input type="text" id="search" class="form-control w-25"/>
+</div>
 <table class="table table-striped">
     <thead>
         <tr>
@@ -14,7 +20,7 @@
             <th>Options</th>
         </tr>
     </thead>
-    <tbody>
+    <tbody id="searchable">
         {% for u in u_list %}
             <tr>
                 <td>{{ u.email }}</td>
@@ -51,6 +57,7 @@
     </tbody>    
 </table>
 <script src="{{ url_for('static', filename='js/jquery-3.6.3.min.js') }}" charset="utf-8"></script>
+<script src="{{ url_for('static', filename='js/tableutils.js') }}"></script>
 <script charset="utf-8">
     $(document).ready(() => {
         $('a.toggle-admin').click((e) => {