Customizable Autocomplete JavaScript Library – horsey.js

Category: Form , Javascript , Recommended | May 30, 2018
Views Total:1,058 views
Official Page:Go to website
Last Update:May 30, 2018


Customizable Autocomplete JavaScript Library  – horsey.js


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: '@'


v4.2.2 (05/30/2018)

  • bugfix

You Might Be Interested In:

Leave a Reply