horsey.js is a autocomplete javascript library that adds customizable autocomplete functions to any elements such as input fields and text areas.

Browser support includes every sane browser and IE7+.

Features

• Small and focused
• Natural keyboard navigation
• Progressively enhanced
• Extensive browser support
• Fuzzy searching
• Supports <input> and <textarea> elements

How to make use of it:

1. Load the basic JavaScript horsey.js file from the DIST folder in your document.

<script src="dist/horsey.js"></script>

2. Custom CSS Styles for Autocomplete Dropdown.

.sey-list {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
  list-style-type: none;
  box-shadow: 1px 2px 6px;
  background-color: #fff;
  color: #333;
  transition: left 0.1s ease-in-out;
}
.sey-show { display: block; }
.sey-hide { display: none; }
.sey-item {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 7px;
}
.sey-item:hover {
  background-color: #444;
  color: #fff;
}
.sey-selected {
  background-color: #333;
  color: #fff;
}

3. Enable the autocomplete function in the input field with a set of predefined suggestions.

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

4. Enable the autocomplete function in the text field that will be triggered when you type “@”.

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

Events

Once you’ve instantiated a horsey, some proprietary synthetic events will be emitted on the provided el.

customizable autocomplete javascript, horsey Plugin/Github

See Demo And Download

Official Website(bevacqua): Click Here

This superior jQuery/javascript plugin is developed by bevacqua. For extra advanced usage, please go to the official website.