Dynamic search of buttons

apps/note/tables.py

@@ -80,10 +80,11 @@ class ButtonTable(tables.Table):
     class Meta:
         attrs = {
             'class':
-                'table table condensed table-striped table-hover'
+                'table table-bordered condensed table-striped table-hover'
         }
         row_attrs = {
             'class': 'table-row',
+            'id': lambda record: "row-"+str(record.pk),
             'data-href': lambda record: record.pk
         }
 

templates/note/transactiontemplate_list.html

@@ -8,12 +8,7 @@
         <h4>
             {% trans "search button" %}
         </h4>
-        <form action="" method="GET">
-            {% csrf_token %}
-            <input class="form-control mx-auto w-25" type="text" id="name" name="name"  value='{{ request.GET.name }}'/>
-        </form>
-        <ul class="list-group list-group-flush" id="alias_matched">
-        </ul>
+        <input class="form-control mx-auto w-25" type="text" onkeyup="search_field_moved();return(false);" id="search_field"/>
         <hr>
         <a class="btn btn-primary text-center my-4" href="{% url 'note:template_create' %}">Créer un bouton</a>
     </div>
@@ -24,3 +19,40 @@
 </div>
 </div>
 {% endblock %}
+
+{% block extrajavascript %}
+<script>
+/* fonction appelée à la fin du timer */
+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/note/transaction/template/?format=json&search="+asked, function(buttons){
+            let selected_id = buttons.results.map((a => "#row-"+a.id));
+            console.log(selected_id.join());
+            $(".table-row,"+selected_id.join()).show();
+            $(".table-row").not(selected_id.join()).hide();
+            
+        });
+    }else{
+        // show everything
+        $('table tr').show();
+    }       
+}
+
+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;
+    }
+}
+</script>
+{% endblock %}