horsey.js Demos

Enter the name of a fruit:

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

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

Being lazy...

      
horsey(document.querySelector('input'), {
  suggestions: function (done) {
    setTimeout(function () {
      done(['banana', 'apple', 'orange']);
    }, 2000);
  }
});

You can also use "key value pairs":

      
horsey(document.querySelector('input'), {
  suggestions: [
    { 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' }
  ]
});

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

      
horsey(document.querySelector('input'), {
  suggestions: [
    { 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' }
  ],
  render: 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'), {
  suggestions: [
    { 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' }
  ],
  limit: 2
});

Want to use it as in a textarea?

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

Want to use it as a drop-down list?

Click here to set fruity treat type

      
horsey(document.querySelector('div'), {
  suggestions: [
    { 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' }
  ]
});

horsey.js Demos

Progressive and customizable autocomplete component

Get it on GitHub! bevacqua/horsey