Typeahead

Example Usage

HTML

<div class='search'></div>

JavaScript

// Pull in the library
const UI = require('jibe-juice');

const db = [{
  displayName: 18045972508
}, {
  displayName: 22458484822
}, {
  displayName: '11234rrwer4'
}, {
  displayName: 324224 - 445
}, {
  displayName: '94df-847s-f49'
}, {
  displayName: 304566745
}, {
  displayName: '71ggf_ffee'
}, {
  displayName: '4055333-0000'
}, {
  displayName: 2000100000
}];

const fetch = function(term, cb) {
  const matches = db.filter(function(item) {
    return (item.displayName + '').indexOf(term) !== -1;
  });

  cb(matches);
};

// Instantiate a component, pass the selector of the container to insert component into and the opts
const searchNumbers = new UI.Typeahead('.search', fetch, {
  allowFreeForm: true,
  fixedResults: [{
    displayName: '-- use my membership id --'
  }]
});

// Subscribe to when new choices are selected from the Typeahead
searchNumbers.subscribe((choice) => {
  console.log('new numba', choice);
});

// Render the DOM for the Typeahead component
searchNumbers.render();

params

Name	Type	Default	Description
el	string	undefined	A string of the selector for the element to put the component in
fetch	function	undefined	The function to call to fetch/refresh results
opts	object	{}	A catch all for various options. See the opts table below for options specific to this component.

opts

Name	Type	Default	Description
allowFreeForm	boolean	false	A boolean indicating if free form input will be accepted
displayProperty	string	'displayName'	A string indicating the property name of the property to display
fixedResults	*[]	[]	An array of results to always display
textInputOpts	object	{}	An object to pass opts to the textInput component