slinto.autocomplete

slinto.autocomplete(): Fast and lightweight search plugin without any dependencies.


Keywords
autocomplete, search, json
License
MIT
Install
bower install slinto.autocomplete

Documentation

slinto.autocomplete() Built with Grunt

slinto.autocomplete() is JavaScript autocomplete plugin written in Google Closure Tools.

Features

  • Fast
    • Average time in 23 records is 1ms (jQuery has 200ms Ouch!)
    • Average time in approx. 1000 records / 3 JSON files is 5ms
  • Lightweight - 15kB (6kB Gzipped)
  • No dependencies

Demo

For live preview go to autocomplete page.

Download

Preferred:
$ bower install slinto.autocomplete

Optional
Download latest release

Usage

Basic usage

slinto.autocomplete.init({
  wrapper: "main-wrapper",
  files: ["assets/data/fruits.json"],
  headings: ["Fruits"],
  scan: ["value"]
});

Advanced usage

slinto.autocomplete.init({
  wrapper: "main-wrapper",
  files: ["assets/data/fruits.json", "assets/data/vegetables.json"],
  headings: ["Fruits", "Vegetables"],
  resultWrapper: "ul#result-wrapper",
  input: "input#search",
  numberOfRecords: 4,
  scan: ["value"],
  events: {
    open: function() {
      console.log('Open event triggered!');
    },
    close: function() {
      console.log('Close event triggered!');
    },
    select: function(url, name){
      console.log("Select event triggered!\n Nazov podniku: " + name + "\n url:" + url);
    }
  }
});

Options:

wrapper

Required Type: String
Default: none
Example: 'wrapperID'

Id of autocomplete wrapper.

files

Required Type: Array of Strings
Default: none
Example: ['data.json'] or ['data1.json', 'data2.json']

headings

Type: Array of Strings
Default: none Example: ['Heading'] or ['Heading 1', 'Heading 2']

resultWrapper

Type: String
Default: none
Example: 'ul#id.className'

input

Type: String
Default: First input[type="text"] searched in wrapper.
Example: input#id.className

numberOfRecords

Type: Number
Default: 5

Number of records from every JSON displayed in the results.

scan

Type: Array of Strings
Default: ['token']
Example: ['value'] or ['value', 'tokens']

events

events#open

Type: Function
Default: none
Example: function(){...}

events#close

Type: Function
Default: none
Example: function(){...}

events#select

Type: Function
Default: none
Example: function(url, name){...}

JSON structure

Example of JSON structure:

[
  {
    "url": "Tomato-url",
    "value": "Tomato"
  }
]

or

[
  {
    "url": "Tomato-url",
    "tokens": ["One", "Two", "Red"],
    "value": "Tomato"
  }
]

Browser Support

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 8+
  • Android Browser 2.3+
  • iOS Safari

To-Do

  • Mocha unit tests
  • Full JSON data for change event

Release History

For release history please go to releases page in this repository.

License

MIT ¬© Tom√°Ň° Stankovińć /Slinto/