horsey

Enter the name of a fruit:

      
horsey(document.querySelector('input'), {
  source: [{ list: ['banana', 'apple', 'orange'] }]
});

Lazy load the fruits, useful for AJAX! (loading starts when the field is focused)

Being lazy...

      
horsey(document.querySelector('input'), {
  source (data, done) {
    var items = [ 'banana', 'apple', 'orange' ];
    setTimeout(() => done(null, [{
      list: items.filter(item => item.indexOf(data.input) !== -1)
    }]), 2000);
  }
});

You can also use "key value pairs":

      
horsey(document.querySelector('input'), {
  source: [{ list: [
    { value: 'banana', text: 'Bananas from Amazon Rainforest' },
    { value: 'apple', text: 'Red apples from New Zealand' },
    { value: 'orange', text: 'Oranges from Moscow' },
    { value: 'lemon', text: 'Juicy lemons from Amalfitan Coast' }
  ]}],
  getText: 'text',
  getValue: 'value'
});

But why stop there? You can render the suggestion however you like!

      
horsey(document.querySelector('input'), {
  source: [{ list: [
    { value: 'banana', text: 'Bananas from Amazon Rainforest' },
    { value: 'apple', text: 'Red apples from New Zealand' },
    { value: 'orange', text: 'Oranges from Moscow' },
    { value: 'lemon', text: 'Juicy lemons from Amalfitan Coast' }
  ]}],
  getText: 'text',
  getValue: 'value',
  renderItem: function (li, suggestion) {
    var image = '<img class="autofruit" src="example/fruits/' + suggestion.value + '.png" /> ';
    li.innerHTML = image + suggestion.text;
  }
});

You can also limit the amount of suggestions to display!

      
horsey(document.querySelector('input'), {
  source: [{ list: [
    { value: 'banana', text: 'Bananas from Amazon Rainforest' },
    { value: 'banana-boat', text: 'Banana Boat' },
    { value: 'apple', text: 'Red apples from New Zealand' },
    { value: 'apple-cider', text: 'Red apple cider beer' },
    { value: 'orange', text: 'Oranges from Moscow' },
    { value: 'orange-vodka', text: 'Classic orange vodka cocktail' },
    { value: 'lemon', text: 'Juicy lemons from Amalfitan Coast' }
  ]}],
  getText: 'text',
  getValue: 'value',
  limit: 2
});

Want to use it as in a textarea?

      
horsey(document.querySelector('textarea'), {
  source: [{ list: [
    { value: '@michael', text: 'Michael Jackson' },
    { value: '@jack', text: 'Jack Johnson' },
    { value: '@ozzy', text: 'Ozzy Osbourne' }
  ]}],
  getText: 'text',
  getValue: 'value',
  anchor: '@'
});

Want to use it as a drop-down list?

Click here to set fruity treat type

      
horsey(document.querySelector('div'), {
  source: [{ list: [
    { value: 'banana', text: 'Bananas from Amazon Rainforest' },
    { value: 'banana-boat', text: 'Banana Boat' },
    { value: 'apple', text: 'Red apples from New Zealand' },
    { value: 'apple-cider', text: 'Red apple cider beer' },
    { value: 'orange', text: 'Oranges from Moscow' },
    { value: 'orange-vodka', text: 'Classic orange vodka cocktail' },
    { value: 'lemon', text: 'Juicy lemons from Amalfitan Coast' }
  ]}],
  getText: 'text',
  getValue: 'value'
});

horsey

Progressive and customizable autocomplete component

Get it on GitHub! bevacqua/horsey