Javascript based search system (using json to be dynamic)

static/search.js

@@ -0,0 +1,72 @@
+$(document).ready(function() {
+	$("#search").on("click", function() {
+		search();
+	});
+
+	$("#advanced").on("click", function() {
+		if ($(this).data("state") === "true") {
+			$(this).find("i").removeClass("bi-chevron-double-up");
+			$(this).find("i").addClass("bi-chevron-double-down");
+			$("#advanced-section").addClass("d-none");
+			$(this).data("state", "false");
+		} else {
+			$(this).find("i").removeClass("bi-chevron-double-down");
+			$(this).find("i").addClass("bi-chevron-double-up");
+			$("#advanced-section").removeClass("d-none");
+			$(this).data("state", "true");
+		}
+	});
+
+	var json = $("#search-json").val();
+	if (json.length > 0) {
+		var searchData = JSON.parse(json);
+		for (const [key, value] of Object.entries(searchData)) {
+			if (key === "advanced") {
+				if (value) {
+					$("#advanced").trigger("click");
+				}
+				
+				continue;
+			}
+
+			if (key === "fields") {
+				// TODO: gérer les champs suppl.
+				continue
+			}
+
+			if (typeof value === "boolean" && value) {
+				console.log(key, value, typeof(value));
+				$("[data-search-field=" + key + "]").prop("checked", true);
+			} else {
+				$("[data-search-field=" + key + "]").val(value);				
+			}
+		}
+	}
+});
+
+function search() {
+	var advancedSearch = ($("#advanced").data("state") === "true");
+	var searchData = {
+		advanced: advancedSearch
+	};
+
+	$("[data-search-field]").each(function() {
+		var advancedField = $(this).data("search-advanced");
+		if (!advancedSearch && advancedField) {
+			return;
+		}
+
+		var index = $(this).data("search-field");
+		var value = $(this).val();
+
+		if ($(this).attr("type") == "checkbox") {
+			value = $(this).prop("checked");
+		}
+
+		searchData[index] = value;
+	});
+
+	var json = JSON.stringify(searchData);
+	$("#search-json").val(json);
+	$("#search-form").submit();
+}