Search In NAVBAR

by bizamajig

HTML

<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Brand</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
							<li class="divider"></li>
							<li><a href="#">One more separated link</a></li>
						</ul>
					</li>
				</ul>
				
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Link</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated...

CSS

body {
		padding: 60px 0px;
	}
	.navbar-collapse {
		position: relative;
		padding-top: 30px !important;
		max-height: 270px;
	}
	.navbar-collapse form[role="search"] {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 100%;
		padding: 0px;
		margin: 0px;
		z-index: 0;
	}
	.navbar-collapse form[role="search"] button,
	.navbar-collapse form[role="search"] input {
		padding: 8px 12px;
		border-radius: 0px;
		border-width: 0px;
		color: rgb(119, 119, 119);
		background-color: rgb(248, 248, 248);
		border-color: rgb(231, 231, 231);
		box-shadow: none;
		outline: none;
	}
	.navbar-collapse form[role="search"] input {
		padding: 16px 12px;
		font-size: 14pt;
		font-style: italic;
		color: rgb(160, 160, 160);
		box-shadow: none;
	}
	.navbar-collapse form[role="search"] button[type="reset"] {
		display: none;
	}

	@media (min-width: 768px) {
		.navbar-collapse {
			padding-top: 0px !important;
			padding-right: 38px !important;
		}
		.navbar-collapse form[role="search"] {
			width: 38px;
		}
		.navbar-collapse form[role="search"] button,
		.navbar-collapse form[role="search"] input {
			padding: 15px 12px;
		}
		.navbar-collapse form[role="search"] input {
			font-size: 18pt;
			opacity: 0;
			display: none;            
            height: 50px;
		}
		.navbar-collapse form[role="search"].active {
			width: 100%;
		}
		.navbar-collapse form[role="search"].active button,
		.navbar-collapse form[role="search"].active input {
			display: table-cell;
			opacity: 1;
		}
    	.navbar-collapse form[role="search"].active input {
			width: 100%;
		}
	}

JavaScript

// Remove Search if user Resets Form or hits Escape!
		$('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) {
			console.log(event.currentTarget);
			if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasClass('active') ||
				$(event.currentTarget).attr('type') == 'reset') {
				closeSearch();
			}
		});

		function closeSearch() {
            var $form = $('.navbar-collapse form[role="search"].active')
    		$form.find('input').val('');
			$form.removeClass('active');
		}

		// Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting
		$(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
			event.preventDefault();
			var $form = $(this).closest('form'),
				$input = $form.find('input');
			$form.addClass('active');
			$input.focus();

		});
		// ONLY FOR DEMO // Please use $('form').submit(function(event)) to track from submission
		// if your form is ajax remember to call `closeSearch()` to close the search container
		$(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) {
			event.preventDefault();
			var $form = $(this).closest('form'),
				$input = $form.find('input');
			$('#showSearchTerm').text($input.val());
            closeSearch()
		});