Typeahead

Example Usage

<div class='search'></div>
// 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

NameTypeDefaultDescription
elstringundefinedA string of the selector for the element to put the component in
fetchfunctionundefinedThe function to call to fetch/refresh results
optsobject{}A catch all for various options. See the opts table below for options specific to this component.

opts

NameTypeDefaultDescription
allowFreeFormbooleanfalseA boolean indicating if free form input will be accepted
displayPropertystring'displayName'A string indicating the property name of the property to display
fixedResults*[][]An array of results to always display
textInputOptsobject{}An object to pass opts to the textInput component