Skip to content
🔍 [Search Like A Boss] JS library for search inputs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
lib
src
vendor
.gitignore
Gruntfile.js
LICENSE
README.md
package.json

README.md

Slab

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

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 git@github.com: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
  • Type Object
  • Required Yes

secondComplete

  • Details
  • 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

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.

You can’t perform that action at this time.