Search search.js

Combines an input and a button to fire the searched event.

Usage

This function includes a simple input and button group that styles with a search icon and fires the searched event.

Via JavaScript:

Call the search control via JavaScript:

{% highlight js %}$('#mySearch').search();{% endhighlight %}

Via data-attributes

To enable the search control without writing JavaScript, add data-initialize="search" to the .search element that you wish to initialize. Such elements that exist when $.ready() executes will be initialized. Any search markup that is programmatically created with data-initialize="search" sometime after the initial page load will not immediately initialize. Rather, it will initialize when the mousedown event is fired on it.

Markup

Wrap class="search" around an input and a button within a class="fuelux" container.

{% highlight html %} {% endhighlight %}

Methods

.search('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.

.search('disable')

Ensures the search component is disabled

.search('enable')

Ensures the search component is enabled

Events

All search events are fired on the .search classed element.

{% highlight js %} $('#mySearch').on('searched.fu.search', function () { // load search results }); {% endhighlight %}

Examples

Wrap the input and search button within .fuelux .search