leenooks/resources/themes/adminlte/views/layouts/partials/mainheader.blade.php

<!-- Main Header -->
<!-- Navbar -->
<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
	<!-- Left navbar links -->
	<ul class="navbar-nav">
		<li class="nav-item">
			<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
		</li>
	</ul>

	<!-- SEARCH FORM -->
	<form class="form-inline ml-3">
		<div class="input-group input-group-sm">
			<input class="form-control form-control-navbar" name="q" type="search" placeholder="Search" aria-label="Search" autocomplete="off">
			<div class="input-group-append">
				<button class="btn btn-navbar" type="submit">
					<i class="fas fa-search"></i>
				</button>
			</div>
			<span name="searching" class="d-none"><i class="fas fa-spinner fa-spin fa-fw" style="margin-top: .33em; width: 1em; height: 1em;"></i></span>
			<div id="search_results"></div>
		</div>
	</form>

	<!-- Right navbar links -->
	<ul class="navbar-nav ml-auto">
		@include('adminlte::layouts.partials.topmenu')

		@if(Auth::check())
			<!-- Profile Settings -->
			<li class="nav-item dropdown">
				<a class="nav-link" data-toggle="dropdown" href="#">
					<i class="fas fa-cog"></i>
				</a>
				<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
					<span class="dropdown-item dropdown-header @if($user->switched) bg-danger @endif">
						@if($user->switched)
							SUDO (<small>{{ $user->name ?: 'User Name' }}</small>)
						@else
							{{ $user->name ?: 'User Name' }}
						@endif
					</span>

					<div class="dropdown-divider"></div>
					<a href="{{ url('settings') }}" class="dropdown-item">
						<i class="fas fa-user mr-2"></i> Settings
					</a>

					<div class="dropdown-divider"></div>
					@if ($user->switched)
						<a href="{{ url('/admin/switch/stop') }}" class="dropdown-item" id="switch">
							<i class="fas fa-sign-out-alt mr-2"></i> {{ trans('adminlte_lang::message.switchoff') }}
						</a>
					@else
						<a href="{{ url('logout') }}" class="dropdown-item">
							<i class="fas fa-sign-out-alt mr-2"></i> Log Out
						</a>
					@endif
				</div>
			</li>
		@else
			<a href="{{ url()->current().'?login=1' }}" class="text-muted pr-2"><i class="fas fa-lock"></i></a>
		@endif

		<!-- Control Side Bar -->
		@isset($controlsidebar)
			<li class="nav-item">
				<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
					<i class="fas fa-th"></i>
				</a>
			</li>
		@endisset

	</ul>
</nav>

@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[name=q]").typeahead({
				autoSelect: false,
				scrollHeight: 10,
				theme: 'bootstrap4',
				delay: 500,
				minLength: 2,
				items: {{ isset($search_limit) ? $search_limit : 100 }},
				fitToElement: false,
				selectOnBlur: false,
				appendTo: "#search_results",
				source: function (query,process) {
					search('{{ url("search",['date'=>isset($ido) ? $ido->id : NULL]) }}',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) {
					console.log(item.value);
					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) {
						if (icon)
							$('i[name='+icon+']').addClass("fa-spin");
						else {
							$('span[name=searching]').removeClass("d-none");
						}
					}
				},
				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) {
						if (icon)
							$('i[name='+icon+']').removeClass("fa-spin");
						else {
							$('span[name=searching]').addClass("d-none");
						}
					}
				}
			})
		}, 500);
	</script>
@append