Better club search bar

apps/member/tables.py

@@ -24,7 +24,8 @@ class ClubTable(tables.Table):
         }
         model = Club
         template_name = 'django_tables2/bootstrap4.html'
-        fields = ('id', 'name', 'email')
+        fields = ('name', 'email',)
+        order_by = ('name',)
         row_attrs = {
             'class': 'table-row',
             'id': lambda record: "row-" + str(record.pk),

apps/member/views.py

@@ -299,6 +299,22 @@ class ClubListView(ProtectQuerysetMixin, LoginRequiredMixin, SingleTableView):
     model = Club
     table_class = ClubTable
 
+    def get_queryset(self, **kwargs):
+        """
+        Filter the user list with the given pattern.
+        """
+        qs = super().get_queryset().filter()
+        if "search" in self.request.GET:
+            pattern = self.request.GET["search"]
+
+            qs = qs.filter(
+                Q(name__iregex=pattern)
+                | Q(note__alias__name__iregex="^" + pattern)
+                | Q(note__alias__normalized_name__iregex=Alias.normalize("^" + pattern))
+            )
+
+        return qs
+
 
 class ClubDetailView(ProtectQuerysetMixin, LoginRequiredMixin, DetailView):
     """

templates/member/club_list.html

@@ -7,7 +7,7 @@
         <h4>
             {% trans "search clubs" %}
         </h4>
-        <input class="form-control mx-auto w-25" type="text" onkeyup="search_field_moved();return(false);" id="search_field"/>
+        <input class="form-control mx-auto w-25" type="text" id="search_field"/>
         <hr>
         <a class="btn btn-primary text-center my-4" href="{% url 'member:club_create' %}">{% trans "Create club" %}</a>
     </div>
@@ -28,43 +28,32 @@
 {% endblock %}
 {% block extrajavascript %}
 <script type="text/javascript">
-
-function getInfo() {
-    var asked = $("#search_field").val();
-    /* on ne fait la requête que si on a au moins un caractère pour chercher */
-    var sel = $(".table-row");
-    if (asked.length >= 1) {
-        $.getJSON("/api/members/club/?format=json&search="+asked, function(buttons){
-            let selected_id = buttons.results.map((a => "#row-"+a.id));
-            $(".table-row,"+selected_id.join()).show();
-            $(".table-row").not(selected_id.join()).hide();
-            
-        });
-    }else{
-        // show everything
-        $('table tr').show();
-    }       
-}
+    $(document).ready(function() {
+        let old_pattern = null;
+        let searchbar_obj = $("#search_field");
+        var timer_on = false;
         var timer;
-var timer_on;
-/* Fontion appelée quand le texte change (délenche le timer) */
-function search_field_moved(secondfield) {
-    if (timer_on) { // Si le timer a déjà été lancé, on réinitialise le compteur.
-        clearTimeout(timer);
-        timer = setTimeout("getInfo(" + secondfield + ")", 300);
-    }
-    else { // Sinon, on le lance et on enregistre le fait qu'il tourne.
-        timer = setTimeout("getInfo(" + secondfield + ")", 300);
-        timer_on = true;
-    }
+
+        function reloadTable() {
+            let pattern = searchbar_obj.val();
+            $("#club_table").load(location.href + "?search=" + pattern.replace(" ", "%20") + " #club_table", init);
         }
 
-// clickable row 
-$(document).ready(function($) {
+        searchbar_obj.keyup(function() {
+            if (timer_on)
+                clearTimeout(timer);
+            timer_on = true;
+            setTimeout(reloadTable, 0);
+        });
+
+        function init() {
             $(".table-row").click(function() {
                 window.document.location = $(this).data("href");
+                timer_on = false;
             });
-});
+        }
 
+        init();
+    });
 </script>
 {% endblock %}

templates/member/user_list.html

@@ -25,6 +25,8 @@
     $(document).ready(function() {
         let old_pattern = null;
         let searchbar_obj = $("#searchbar");
+        var timer_on = false;
+        var timer;
 
         function reloadTable() {
             let pattern = searchbar_obj.val();
@@ -33,17 +35,19 @@
                 return;
 
             $("#user_table").load(location.href + "?search=" + pattern.replace(" ", "%20") + " #user_table", init);
-
-            $(".table-row").click(function() {
-                window.document.location = $(this).data("href");
-            });
         }
 
-        searchbar_obj.keyup(reloadTable);
+        searchbar_obj.keyup(function() {
+            if (timer_on)
+                clearTimeout(timer);
+            timer_on = true;
+            setTimeout(reloadTable, 0);
+        });
 
         function init() {
             $(".table-row").click(function() {
                 window.document.location = $(this).data("href");
+                timer_on = false;
             });
         }