Bootstrap Simple Navbar Search

<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="javascript:;">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="javascript:;">Link</a></li>
				<li><a href="javascript:;">Link</a></li>
				<li class="dropdown">
					<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:;">Action</a></li>
						<li><a href="javascript:;">Another action</a></li>
						<li><a href="javascript:;">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="javascript:;">Separated link</a></li>
						<li class="divider"></li>
						<li><a href="javascript:;">One more separated link</a></li>
					</ul>
				</li>
			</ul>
			
			<ul class="nav navbar-nav navbar-right">
				<li><a href="javascript:;">Link</a></li>
				<li class="dropdown">
					<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:;">Action</a></li>
						<li><a href="javascript:;">Another action</a></li>
						<li><a href="javascript:;">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="javascript:;">Separated link</a></li>
					</ul>
				</li>
			</ul>

			<form class="navbar-form" role="search">
				<div class="input-group">
					<input type="text" class="form-control" placeholder="Search...">
					<span class="input-group-btn">
						<button type="submit" class="btn btn-default">
							<span class="glyphicon glyphicon-search">
								<span class="sr-only">Search...</span>
							</span>
						</button>
					</span>
				</div>
			</form>
		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>

<div class="container">
	<div class="row">
        <div class="alert alert-success">
            <strong>Your Result!</strong> <span id="showSearchTerm"></span>
        </div>
</div>
</div>

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;
}

@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 {
		padding: 25px 12px;
		font-size: 18pt;
		opacity: 0;
		display: none;
	}
	.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%;
        text-align: right;
	}
    .navbar-collapse form[role="search"].active button[type="submit"] {
        background-color: rgb(231, 231, 231);
    }
}

$(function () {
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()
});
});