mirror of
				https://gitlab.crans.org/bde/nk20
				synced 2025-10-31 15:50:03 +01:00 
			
		
		
		
	Update URL when searching
This commit is contained in:
		| @@ -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 %} | ||||
		Reference in New Issue
	
	Block a user