mcrowe / soulmate.js

A jQuery front-end for the soulmate auto-suggestion gem
MIT License
121 stars 18 forks source link

soulmate.js

Soulmate.js is a jQuery plugin front-end for soulmate, an excellent auto-suggestion gem built for speed on sinatra and redis. Together, they provide lightning-fast plug-n-play auto-suggestion. See soulmate on github for more details on the back-end interface.

Note: This plugin is not affiliated with the soulmate gem or its authors. The name is merely a knock-off.

Demo

Soulmate.js is inspired by the excellent autocompletion interface used on seatgeek.com. It works and feels very similar, although the implementation is entirely original.

The demo directory in the source provides an example usage and styling of the plugin. It does not supply a back-end, however, so you will have to set up soulmate and point the demo to it.

Features

Usage

First, setup an instance of soulmate. Then, grab src/compiled/jquery.soulmate.js and place it in your project. Finally, do something like the following (or follow the example in the demo directory):

index.html

...
<script type="text/javascript" src="https://github.com/mcrowe/soulmate.js/raw/master/jquery.soulmate.js">
<script type="text/javascript" src="https://github.com/mcrowe/soulmate.js/raw/master/main.js">
...
<input id="search-input" type="text" name="q" value="" autocomplete="off"/>

main.js

...
// Define the rendering and selecting behaviour for suggestions.
render = function(term, data, type){ return term; }
select = function(term, data, type){ console.log("Selected " + term); }

// Make the input field autosuggest-y.
$('#search-input').soulmate({
  url:            'http://soulmate.YOUR-DOMAIN.com/search',
  types:          ['type1', 'type2', 'type3', 'type4'],
  renderCallback: render,
  selectCallback: select,
  minQueryLength: 2,
  maxResults:     5
});
...

For more information, see the specifications in the spec/ directory.

Running Specs

Soulmate.js is covered by Jasmine and Jasmine-JQuery specs. See the spec/ directory to browse the specifications.

To run the specs, simply open spec/spec_runner.html in your browser.