From ba1a16b39e6dd89bf971e9547e247653a21fb1ca Mon Sep 17 00:00:00 2001
From: envoyr <hello@envoyr.com>
Date: Tue, 8 Mar 2022 21:29:14 +0100
Subject: [PATCH] update search

---
 templates/Froxlor/assets/js/main.js           | 72 ++++++++++++-------
 templates/Froxlor/src/js/components/search.js | 41 +++++++++--
 templates/Froxlor/userarea.html.twig          | 16 ++---
 3 files changed, 87 insertions(+), 42 deletions(-)

diff --git a/templates/Froxlor/assets/js/main.js b/templates/Froxlor/assets/js/main.js
index ed6155be..1be81d15 100644
--- a/templates/Froxlor/assets/js/main.js
+++ b/templates/Froxlor/assets/js/main.js
@@ -3238,32 +3238,54 @@ $(document).ready(function () {
 /***/ (() => {
 
 $(document).ready(function () {
-  console.log('included search');
-  $.typeahead({
-    input: '.js-typeahead-search_v1',
-    order: "desc",
-    dynamic: true,
-    display: ['data.title'],
-    href: "{{url}}",
-    emptyTemplate: "No results for {{query}}",
-    debug: true,
-    source: {
-      settings: {
-        ajax: {
-          method: "post",
-          url: "lib/ajax.php?action=searchsetting&theme=" + window.$theme + "&s=" + window.$session,
-          path: "title",
-          data: {
-            searchtext: '{{query}}'
-          }
-        }
+  var search = $('#search');
+  search.submit(function (e) {
+    e.preventDefault();
+  });
+  search.find('input').on('keyup', function () {
+    var query = $(this).val();
+    var dropdown = $('#search-dropdown'); // Hide search if query is empty
+
+    if (!query.length) {
+      dropdown.hide().html('');
+      return;
+    } // Show notification for short search query
+
+
+    if (query.length && query.length < 3) {
+      dropdown.show().html('<li class="list-group-item text-muted">Please enter more than 2 characters</li>');
+      return;
+    } // Search
+
+
+    $.ajax({
+      url: "lib/ajax.php?action=searchglobal&theme=" + window.$theme + "&s=" + window.$session,
+      type: "POST",
+      data: {
+        searchtext: query
+      },
+      dataType: "json",
+      success: function success(data) {
+        // Show notification if we got no results
+        if (Object.keys(data).length === 0) {
+          dropdown.show().html('<li class="list-group-item text-muted">Nothing found!</li>');
+          return;
+        } // Clear dropdown and show results
+
+
+        dropdown.show().html('');
+        Object.keys(data).forEach(function (key) {
+          dropdown.append('<li class="list-group-item text-muted text-capitalize">' + key + '</li>');
+          data[key].forEach(function (item) {
+            dropdown.append('<li class="list-group-item"><a href="' + item.href + '" class="text-decoration-none">' + item.title + '</a></li>');
+          });
+        });
+      },
+      error: function error(a, b) {
+        console.log(a, b);
+        dropdown.show().html('<li class="list-group-item text-muted">Whoops we got some errors!</li>');
       }
-    },
-    callback: {
-      onInit: function onInit(node) {
-        console.log('Typeahead Initiated');
-      }
-    }
+    });
   });
 });
 
diff --git a/templates/Froxlor/src/js/components/search.js b/templates/Froxlor/src/js/components/search.js
index 3663339b..baad47bd 100644
--- a/templates/Froxlor/src/js/components/search.js
+++ b/templates/Froxlor/src/js/components/search.js
@@ -1,19 +1,50 @@
 $(document).ready(function () {
-	console.log('included search');
+	let search = $('#search')
 
-	$('input[class=js-typeahead-search_v1]').on('change keyup keydown', function () {
+	search.submit(function (e) {
+		e.preventDefault();
+	});
+
+	search.find('input').on('keyup', function () {
+		let query = $(this).val();
+		let dropdown = $('#search-dropdown');
+		// Hide search if query is empty
+		if (!query.length) {
+			dropdown.hide().html('');
+			return;
+		}
+		// Show notification for short search query
+		if (query.length && query.length < 3) {
+			dropdown.show().html('<li class="list-group-item text-muted">Please enter more than 2 characters</li>');
+			return;
+		}
+		// Search
 		$.ajax({
 			url: "lib/ajax.php?action=searchglobal&theme=" + window.$theme + "&s=" + window.$session,
 			type: "POST",
 			data: {
-				searchtext: $(this).val()
+				searchtext: query
 			},
 			dataType: "json",
-			success: function (data) {
-				console.log(data);
+			success: data => {
+				// Show notification if we got no results
+				if (Object.keys(data).length === 0) {
+					dropdown.show().html('<li class="list-group-item text-muted">Nothing found!</li>');
+					return;
+				}
+
+				// Clear dropdown and show results
+				dropdown.show().html('');
+				Object.keys(data).forEach(key => {
+					dropdown.append('<li class="list-group-item text-muted text-capitalize">' + key + '</li>');
+					data[key].forEach(item => {
+						dropdown.append('<li class="list-group-item"><a href="' + item.href + '" class="text-decoration-none">' + item.title + '</a></li>');
+					});
+				});
 			},
 			error: function (a, b) {
 				console.log(a, b);
+				dropdown.show().html('<li class="list-group-item text-muted">Whoops we got some errors!</li>');
 			}
 		});
 	});
diff --git a/templates/Froxlor/userarea.html.twig b/templates/Froxlor/userarea.html.twig
index 83c7b55f..ef88bc7b 100644
--- a/templates/Froxlor/userarea.html.twig
+++ b/templates/Froxlor/userarea.html.twig
@@ -30,19 +30,11 @@
 					<span class="navbar-toggler-icon"></span>
 				</button>
 			</div>
-			<form id="form-search_v1" name="form-search_v1">
-				<div class="typeahead__container">
-					<div class="typeahead__field">
-						<div class="typeahead__query">
-							<input class="js-typeahead-search_v1" name="search_v1[query]" placeholder="Search" autocomplete="off">
-						</div>
-						<div class="typeahead__button">
-							<button type="submit">
-								<i class="typeahead__search-icon"></i>
-							</button>
-						</div>
-					</div>
+			<form id="search" class="position-relative" method="post">
+				<div class="input-group">
+					<input title="search" type="search" class="form-control-plaintext" placeholder="Search for ..." style="outline: none">
 				</div>
+				<ul id="search-dropdown" class="bg-white border list-group list-group-flush position-absolute" style="display:none; z-index: 50; max-height: 300px; overflow-y: scroll"></ul>
 			</form>
 			<div class="collapse navbar-collapse justify-content-end px-3" id="navbar">
 				<ul class="navbar-nav align-items-center">