Slab is a JavaScript component that handles search filters and queries.
A demo of the library in action can be found here.
So far tested on Chrome, Firefox, Safari and Opera.
Slab has 1 dependency – and that is Complete Me.
$ git clone git@github.com:callum-hart/Slab.git
$ cd Slab
$ npm install
$ grunt watch
Include CSS and JavaScript from Complete Me. Both need to be included before the CSS and JavaScript for Slab:
<!-- CSS -->
<link href="complete-me.min.css" rel="stylesheet">
<link href="slab.min.css" rel="stylesheet">
<!-- JavaScript -->
<script type="text/javascript" src="complete-me.min.js"></script>
<script type="text/javascript" src="slab.min.js"></script>
Create an instance:
var instance = new Slab(element, { options });
element
can be a selector or a DOM element.
- Details
- Child attributes are Configuration options and Callbacks from the Complete Me library.
- Type
Object
- Required Yes
- Details
- Child attributes are Configuration options and Callbacks from the Complete Me library.
- Type
Object
- Required Yes
- Details
- Give the Slab input a submit button.
- Type
Boolean
- Default
False
- Details
- Change what class is applied to the button.
- Type
String
- Default
ss-button
- Condition
- Option
withButton
has to be set totrue
.
- Option
- Details
- Key that should be taken as the search filter if Slab is submitted when no filter has been selected by the user. The key is a reference to an object in the data option from Complete Me.
data
type forfirstComplete
will need to beArray <Object>
.
- Key that should be taken as the search filter if Slab is submitted when no filter has been selected by the user. The key is a reference to an object in the data option from Complete Me.
- Type
String
onSubmit: (searchKey, searchValue) {}
- Details
- When the Slab input is submitted.
- Arguments
(searchKey, searchValue)
- Condition
- Only called when the search filter and query are valid.
The HTML generated by Slab is:
<div class="sb-container">
<span class="sb-label"></span>
<div class="sb-complete first-complete-me cm-container">
<div class="cm-input-wrap">
<input type="text" class="cm-input">
<input type="text" class="cm-suggestion">
</div>
<div class="cm-results-wrap">
<ul class="cm-results">
<li><a href="#"></a></li>
</ul>
</div>
</div>
<div class="sb-complete second-complete-me cm-container">
<div class="cm-input-wrap">
<input type="text" class="cm-input">
<input type="text" class="cm-suggestion">
</div>
<div class="cm-results-wrap">
<ul class="cm-results">
<li><a href="#"></a></li>
</ul>
</div>
</div>
<span class="ss-tab"></span>
</div>
Classes that are applied when a certain condition is true.
.label-showing
- Condition
- Applied when the search filter is selected.
- Element
- Applied to
.sb-container
- Applied to
.focussed
- Condition
- Applied when the Slab input is focussed.
- Element
- Applied to
.sb-container
- Applied to
Conditional classes are applied to the Complete Me's rendered inside Slab. These can be found here.