Bootstrap Inline 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 pull-right" style="width: 300px; margin-right: 35px, border: 1px solid black; background-color: #e5e5e5;" placeholder="Search">
						<span class="input-group-btn">
							<button type="reset" class="btn btn-default">
								<span class="glyphicon glyphicon-remove">
									<span class="sr-only">Close</span>
								</span>
							</button>
							<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>
	<script type="text/javascript"></script>

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

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