jQuery Expand Search

Demo

Press return to search. Press Esc to cancel.

Usage

1. Import StyleSheet

<link rel="stylesheet" href="jquery.expand-search.css">

2. Markup

<form class="search-box">
	<div class="btn-close"></div>
	<p>
		<input type="text" value="" placeholder="Search" data-active-placeholder="Type to search...">
	</p>
	<p class="help">
		Press <strong>return</strong> to search. Press <strong>Esc</strong> to cancel.
	</p>
</form>

3. JavaScript

$(function() {
	$('.search-box').expandSearch(options);
});

Options

{
	"CloseButton": ".btn-close",
	"TextField": "input[type=text]",
	"ActiveClassName": "active"
}

Manual switch

$(selector).data('expandSearch').off();
$(selector).data('expandSearch').on();