horsey

Progressive and customizable autocomplete component

Fork me on GitHub
      
horsey(document.querySelector('input'), {
  source: [{ list: ['banana', 'apple', 'orange'] }]
});
      
    
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);
  }
});
      
    
      
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 the rich Amalfitan Coast' }
  ]}],
  getText: 'text',
  getValue: 'value'
});
      
    
      
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;
  }
});
      
    
      
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
});
      
    
      
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: '@'
});
      
    
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'
});
      
    

Get it on GitHub! bevacqua/horsey