@mention autocompletar en ES6 JS
| Autor: | leweekend |
|---|---|
| Views Total: | 364 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 12, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Se trata de una implementación de Vanilla JavaScript (ES6) del popular @mention una funcionalidad de autocompletar en un elemento TEXTAREA. Inspirado en Github, Facebook, Twitter, etc.
See also:
Funcionamiento
Importa el JavaScript principal en el documento.
<script src="main.js"></script>
Inicialice la mención en su TextArea y defina una matriz de datos de usuario de la siguiente manera:
<textarea id="txtarea" placeholder="@someone"></textarea>
mention({
id: 'txtarea',
people: [{
name: 'John F',
username: 'john' ,
image : '1.jpg'
},{
name: 'John F',
username: 'john' ,
image : '2.jpg'
},{
name: 'John F',
username: 'john' ,
image : '3.jpg'
},
}); Los estilos CSS predeterminados para la lista de autocompletar.
.mention-lookup-nt {
width: 500px;
}
.mention-lookup-nt ul {
color: #ccc;
list-style-type: none;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
overflow: auto;
width:225px;
padding-left: 5px;
margin-top: 10px;
}
.mention-lookup-nt li {
padding-top: 10px;
padding-bottom: 10px;
}
.mention-li-nt div {
font: 12px/1.5 Helvetica, Verdana ,sans-serif;
padding-left: 60px;
color: #555;
}
.mention-li-nt img {
position: absolute;
width: 50px;
height: 40px;
}
.mention-li-nt:hover {
background: #eee;
cursor: pointer;
}
