Added search

resources/views/layouts/partials/scripts.blade.php

@@ -5,6 +5,9 @@
 <!-- JavaScript Bundle with Popper -->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
 
+<!-- Additional Utilities -->
+<script src="{{ asset('plugin/bootstrap3-typeahead/bootstrap3-typeahead.min.js') }}"></script>
+
 <script type="text/javascript">
 	// Example starter JavaScript for disabling form submissions if there are invalid fields
 	(function () {

resources/views/layouts/partials/topmenu.blade.php

@@ -23,6 +23,12 @@
 		@endguest
 	</ul>
 
+	@auth
+	<ul class="float-end" id="searchbar">
+		<li><input type="text" id="q" name="search" placeholder="Search..."><i class="bi bi-search"></i><div id="search_results"></div></li>
+	</ul>
+	@endauth
+
 	{{--
 	<div id="fontwidget">
 		<span id="row1">
@@ -72,3 +78,78 @@
 		@include('layouts.partials.sidebar')
 	</div>
 </div>
+
+@section('page-scripts')
+	<style>
+		/* Solid border */
+		div.typeahead.dropdown-menu > .dropdown-header {
+			color: #000000;
+			text-align: left;
+		}
+	</style>
+
+	<script type="text/javascript">
+		$(document).ready(function() {
+			$("input[id=q]").typeahead({
+				autoSelect: false,
+				scrollHeight: 10,
+				theme: 'bootstrap5',
+				delay: 500,
+				minLength: 2,
+				items: {{ $search_limit ?? 100 }},
+				fitToElement: false,
+				selectOnBlur: false,
+				appendTo: "#search_results",
+				source: function (query,process) {
+					search('{{ url('search') }}',query,process);
+				},
+
+				matcher: function () { return true; },
+
+				// Disable sorting and just return the items (items should by the ajax method)
+				sorter: function(items) {
+					return items;
+				},
+
+				updater: function (item) {
+					window.parent.location.href = item.value;
+				},
+			})
+				.on('keyup keypress', function(event) {
+					var key = event.keyCode || event.which;
+					if (key === 13) {
+						event.preventDefault();
+						return false;
+					}
+				});
+		});
+
+		var c=0;
+		var search = _.debounce(function(url,query,process,icon){
+			$.ajax({
+				url : url,
+				type : 'GET',
+				data : 'term=' + query,
+				dataType : 'JSON',
+				async : true,
+				cache : false,
+				beforeSend : function() {
+					if (c++ == 0) {
+						$('i.bi-search').addClass('spinner-grow spinner-grow-sm');
+					}
+				},
+				success : function(data) {
+					// if json is null, means no match, won't do again.
+					if(data==null || (data.length===0)) return;
+
+					process(data);
+				},
+				complete : function() {
+					if (--c == 0) {
+						$('i.bi-search').removeClass('spinner-grow spinner-grow-sm');
+					}
+				}
+			})
+		}, 500);
+	</script>
+@append