Skip to content

Latest commit

 

History

History
113 lines (74 loc) · 2.47 KB

API.md

File metadata and controls

113 lines (74 loc) · 2.47 KB
Raw

Suggestions

A typeahead component for inputs

Parameters

  • el HTMLInputElement A valid HTML input element
  • data Array An array of data used for results
  • options Object
    • options.limit [Number] Max number of results to display in the auto suggest list. (optional, default 5)
    • options.minLength [Number] Number of characters typed into an input to trigger suggestions. (optional, default 2)

Examples

// in the browser
var input = document.querySelector('input');
var data = [
  'Roy Eldridge',
  'Roy Hargrove',
  'Rex Stewart'
];

new Suggestions(input, data);

// with options
var input = document.querySelector('input');
var data = [{
  name: 'Roy Eldridge',
  year: 1911
}, {
  name: 'Roy Hargrove',
  year: 1969
}, {
  name: 'Rex Stewart',
  year: 1907
}];

var typeahead = new Suggestions(input, data, {
  filter: false, // Disable filtering
  minLength: 3, // Number of characters typed into an input to trigger suggestions.
  limit: 3 //  Max number of results to display.
});

// As we're passing an object of an arrays as data, override
// `getItemValue` by specifying the specific property to search on.
typeahead.getItemValue = function(item) { return item.name };

input.addEventListener('change', function() {
  console.log(typeahead.selected); // Current selected item.
});

// With browserify
var Suggestions = require('suggestions');

new Suggestions(input, data);

Returns Suggestions this

clear

Clears data

getItemValue

For a given item in the data array, return what should be used as the candidate string

Parameters

  • item Object or String an item from the data array

Returns String item

match

Evaluates whether an array item qualifies as a match with the current query

Parameters

  • candidate String a possible item from the array passed
  • query String the current query

Returns Boolean

normalize

Normalize the results list and input value for matching

Parameters

  • value String

Returns String

render

For a given item in the data array, return a string of html that should be rendered in the dropdown

Parameters

  • item Object or String an item from the data array
  • sourceFormatting String a string that has pre-formatted html that should be passed directly through the render function

Returns String html

update

Update data previously passed

Parameters

  • revisedData Array