update search

templates/Froxlor/assets/js/main.js

@@ -3238,32 +3238,54 @@ $(document).ready(function () {
 /***/ (() => {
 
 $(document).ready(function () {
-  console.log('included search');
+  var search = $('#search');
-  $.typeahead({
+  search.submit(function (e) {
-    input: '.js-typeahead-search_v1',
+    e.preventDefault();
-    order: "desc",
+  });
-    dynamic: true,
+  search.find('input').on('keyup', function () {
-    display: ['data.title'],
+    var query = $(this).val();
-    href: "{{url}}",
+    var dropdown = $('#search-dropdown'); // Hide search if query is empty
-    emptyTemplate: "No results for {{query}}",
+
-    debug: true,
+    if (!query.length) {
-    source: {
+      dropdown.hide().html('');
-      settings: {
+      return;
-        ajax: {
+    } // Show notification for short search query
-          method: "post",
+
-          url: "lib/ajax.php?action=searchsetting&theme=" + window.$theme + "&s=" + window.$session,
+
-          path: "title",
+    if (query.length && query.length < 3) {
-          data: {
+      dropdown.show().html('<li class="list-group-item text-muted">Please enter more than 2 characters</li>');
-            searchtext: '{{query}}'
+      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');
-      }
-    }
   });
 });
 

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) {
+			success: data => {
-				console.log(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>');
 			}
 		});
 	});

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">
+			<form id="search" class="position-relative" method="post">
-				<div class="typeahead__container">
+				<div class="input-group">
-					<div class="typeahead__field">
+					<input title="search" type="search" class="form-control-plaintext" placeholder="Search for ..." style="outline: none">
-						<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>
 				</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">