Customizable Autocomplete JavaScript Library – horsey.js

Preview:

Description:

horsey.js is a robust JavaScript library that adds customizable autocomplete functionality to any elements like input fields and textareas.

Basic usage:

Load the core JavaScript horsey.js from DIST folder in your document.

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

The custom CSS styles for the dropdown autocomplete list.

.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;
}

Enable the autocomplete functionality on an input field with an array of predefined suggestions.

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

Enable the autocomplete functionality on a textfield 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: '@'
});

Changelog:

v4.2.2 (05/30/2018)

• bugfix