From 2272cf529495aeb511459749c3e8a30523b37c4c Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Sat, 22 Aug 2020 09:35:55 +0200
Subject: [PATCH] Update URL when searching

---
 note_kfet/templates/base_search.html | 37 ++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/note_kfet/templates/base_search.html b/note_kfet/templates/base_search.html
index 1c588114..83c715d9 100644
--- a/note_kfet/templates/base_search.html
+++ b/note_kfet/templates/base_search.html
@@ -12,7 +12,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
         {{ title }}
     </h3>
     <div class="card-body">
-        <input id="searchbar" type="text" class="form-control" placeholder="{% trans "Search by attribute such as name…" %}">
+        <input id="searchbar" type="text" class="form-control"
+            placeholder="{% trans "Search by attribute such as name…" %}">
     </div>
     <div id="dynamic-table">
         {% if table.data %}
@@ -30,8 +31,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 {% block extrajavascript %}
 <script type="text/javascript">
-    let pattern = '';
-
     function reloadTable() {
         pattern = $("#searchbar").val();
 
@@ -46,24 +45,42 @@ SPDX-License-Identifier: GPL-3.0-or-later
         });
 
         // Highlight searched terms
-        $("tr").each(function () {
-            $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function () {
-                $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
+        const pattern = $("#searchbar").val();
+        if (pattern.length > 2) {
+            $("tr").each(function () {
+                $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function () {
+                    $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
+                });
             });
-        });
+        }
     }
 
     $(document).ready(function () {
+        let pattern = '';
+
         // Recover last search from url
         let searchParams = new URLSearchParams(window.location.search)
-        if (searchParams.has('search'))
+        if (searchParams.has('search')) {
             pattern = searchParams.get('search');
+        }
 
         // On search, refresh table
-        $("#searchbar").keyup(debounce(reloadTable, 300));
+        $("#searchbar").keyup(debounce(function () {
+            // Get new pattern
+            pattern = $("#searchbar").val();
+
+            // Set URL
+            searchParams.set('search', pattern);
+            history.pushState({}, null, "?" + searchParams.toString());
+
+            // If long enough, update table
+            if (pattern.length > 2) {
+                $("#dynamic-table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #dynamic-table", init_table);
+            }
+        }, 300));
 
         // First init
         init_table();
     });
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file