Biblioteca de JavaScript autocompletado personalizable-horsey. js

Vista prévia

Descripción

horsey. js es una biblioteca de JavaScript robusta que agrega personalizable funcionalidad de autocompletar a cualquier elemento como campos de entrada y textareas.

¿Cómo funciona?

Cargue el núcleo de JavaScript de horsey. js de la carpeta DIST en el documento.

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

Los estilos CSS personalizados para la lista de autocompletar desplegable.

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

Habilite la funcionalidad de autocompletar en un campo de entrada con una matriz de sugerencias predefinidas.

horsey(document.querySelector('input'), {

suggestions: ['banana', 'apple', 'orange']
});

Habilite la funcionalidad de autocompletar en un campo de texto que se activará cuando escriba ' @ '.

horsey(document.querySelector('textarea'), {

suggestions: [


{ value: '@michael', text: 'Michael Jackson' },


{ value: '@jack', text: 'Jack Johnson' },


{ value: '@ozzy', text: 'Ozzy Osbourne' }

],

anchor: '@'
});

Registro de cambios

v4.2.2 (05/30/2018)

• Bugfix