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="fa 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">
			<div class="input-group-append">
				<button class="btn btn-navbar" type="submit">
					<i class="fa fa-search"></i>
				</button>
			</div>
			<span name="searching" class="d-none"><i class="fa 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="fa fa-cog"></i>
				</a>
				<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
					<span class="dropdown-item dropdown-header">{{ $user->name ?: 'User Name' }}</span>

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

					<div class="dropdown-divider"></div>
					<a href="{{ url('logout') }}" class="dropdown-item">
						<i class="fa fa-sign-out mr-2"></i> Log Out
					</a>
				</div>
			</li>
		@else
			<a href="{{ url('login') }}" class="text-muted pr-2"><i class="fa 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="fa fa-th-large"></i>
				</a>
			</li>
		@endisset

	</ul>
</nav>

@section('page-scripts')
	@js('/plugin/bootstrap3-typeahead/js/bootstrap3-typeahead.min.js','bs-typeahead')

	<script type="text/javascript">
		$(document).ready(function() {
			$("input[name=q]").typeahead({
				delay: 500,
				minLength: 2,
				items: {{ isset($search_limit) ? $search_limit : 15 }},
				fitToElement: false,
				appendTo: "#search_results",
				source: function (query,process) {
					search('{{ url("search",['date'=>isset($ido) ? $ido->id : NULL]) }}',query,process);
				},

				matcher: function () { return true; },

				updater: function (item) {
					window.parent.location.href = '{{ url("/") }}'+users[item];
				},
			})
			.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;

					users = {};
					userLabels = [];
					_.each(data,function(item,ix,list) {
						if (_.includes(users,item.label))
							item.label = item.label + ' #' + item.value;

						userLabels.push(item.label);
						users[item.label] = item.value;
					});

					process(userLabels);
				},
				complete : function() {
					if (--c == 0) {
						if (icon)
							$('i[name='+icon+']').removeClass("fa-spin");
						else {
							$('span[name=searching]').addClass("d-none");
						}
					}
				}
			})
		}, 500);
	</script>
@append