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:

$('#mySearch').search();

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.

<div class="search input-group" id="mySearch" role="search">
  <input class="form-control" type="search" placeholder="Search"/>
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <span class="glyphicon glyphicon-search"></span>
      <span class="sr-only">Search</span>
    </button>
  </span>
</div>

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.

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

Examples

Wrap the input and search button within .fuelux .search