Suggestions

Simple example

<script>
var input = document.querySelector('input');
var data = [
  'Roy Eldridge',
  'Roy Hargrove',
  'Tim Hagans',
  'Tom Harrell',
  'Freddie Hubbard',
  'Nicholas Payton',
  'Miles Davis',
  'Dizzy Gillespie',
  'Rex Stewart'
];

new Suggestions(input, data);
</script>

Example with options

Pass an array of objects as data & target a specific property by overriding `getItemValue`. Add pass `minLength`, `limit` & `hideOnBlur` options on initialization.

<script>
var input = document.querySelector('input');
var data = [{
  name: 'Roy Eldridge',
  year: 1911
}, {
  name: 'Roy Hargrove',
  year: 1969
}, {
  name: 'Tim Hagans',
  year: 1954
}, {
  name: 'Tom Harrell',
  year: 1946
}, {
  name: 'Freddie Hubbard',
  year: 1938
}, {
  name: 'Nicholas Payton',
  year: 1973
}, {
  name: 'Miles Davis',
  year: 1926
}, {
  name: 'Dizzy Gillespie',
  year: 1917
}, {
  name: 'Rex Stewart',
  year: 1907
}];

var typeahead = new Suggestions(input, data, {
  minLength: 3, // Number of characters typed into an input to trigger suggestions.
  limit: 3, //  Max number of results to display. 
  hideOnBlur: false // Don't hide results when input loses focus
});

typeahead.getItemValue = function(item) {
  return item.name
};

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

</script>

Example with filtering turned off

<script>
var input = document.querySelector('input');
var data = [
  'Roy Eldridge',
  'Roy Hargrove',
  'Tim Hagans',
  'Tom Harrell',
  'Freddie Hubbard',
  'Nicholas Payton',
  'Miles Davis',
  'Dizzy Gillespie',
  'Rex Stewart'
];

new Suggestions(input, data, {
  filter: false
});
</script>

Example with a custom render function

<script>
var input = document.querySelector('input');
var data = [{
  name: 'Roy Eldridge',
  year: 1911
}, {
  name: 'Roy Hargrove',
  year: 1969
}, {
  name: 'Tim Hagans',
  year: 1954
}, {
  name: 'Tom Harrell',
  year: 1946
}, {
  name: 'Freddie Hubbard',
  year: 1938
}, {
  name: 'Nicholas Payton',
  year: 1973
}, {
  name: 'Miles Davis',
  year: 1926
}, {
  name: 'Dizzy Gillespie',
  year: 1917
}, {
  name: 'Rex Stewart',
  year: 1907
}];


var customRenderSuggestion = new Suggestions(inputCustomRender, objectData, { 
  render: function(item){
    return "
${item.name} (${item.year})
"
  },
  getItemValue: function(item){
    return item.name
  }
});
</script>