callum-hart / Slab

:mag: [Search Like A Boss] JS library for search inputs

Slab

Slab is a JavaScript component that handles search filters and queries.

• Getting Started
  • Demo
  • Supported Browsers
  • Dependencies
  • To Run
  • To Use
• Configuration
  • firstComplete
  • secondComplete
  • withButton
  • buttonClass
  • firstComplete.defaultKey
• Callbacks
  • onSubmit
• Markup
  • Generated HTML
  • Conditional CSS Classes
    • label-showing
    • focussed

Getting Started

Demo

A demo of the library in action can be found here.

Supported Browsers

So far tested on Chrome, Firefox, Safari and Opera.

Dependencies

Slab has 1 dependency – and that is Complete Me.

To Run

$ git clone [e-mail]:callum-hart/Slab.git
$ cd Slab
$ npm install
$ grunt watch

To Use

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.

Configuration

firstComplete

• Details
  • Child attributes are Configuration options and Callbacks from the Complete Me library.
• Type Object
• Required Yes

secondComplete

• Details
  • Child attributes are Configuration options and Callbacks from the Complete Me library.
• Type Object
• Required Yes

withButton

• Details
  • Give the Slab input a submit button.
• Type Boolean
• Default False

buttonClass

• Details
  • Change what class is applied to the button.
• Type String
• Default ss-button
• Condition
  • Option withButton has to be set to true.

firstComplete.defaultKey

• 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 for firstComplete will need to be Array <Object>.
• Type String

Callbacks

onSubmit

onSubmit: (searchKey, searchValue) {}

• Details
  • When the Slab input is submitted.
• Arguments (searchKey, searchValue)
• Condition
  • Only called when the search filter and query are valid.

Markup

Generated HTML

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>

Conditional CSS Classes

Classes that are applied when a certain condition is true.

label-showing

.label-showing

• Condition
  • Applied when the search filter is selected.
• Element
  • Applied to .sb-container

focussed

.focussed

• Condition
  • Applied when the Slab input is focussed.
• Element
  • Applied to .sb-container

Conditional classes are applied to the Complete Me's rendered inside Slab. These can be found here.