Quién me puede ayudar a hacer esto en JavaScript (autocompletador textarea 📝)

[Mr_J21]

Es lo mismo que cuando usas Visual Studio Code que te autocompleta el codigo, quiero hacer lo mismo.

const Array = [ 'Nikola Tesla', 'Jannie Dooley', 'Cole Nienow';

El código debería funcionar en los tres <textarea> cada vez que seleccioné uno <textarea> debe autocompletar.

<textarea></textarea>
<textarea></textarea>
<textarea></textarea>

Quiero hacer esto solo con javascript

 

[SEMTaurus]

Pero, ¿JS puro o se vale usar framework? xD

 

[Mr_J21]

Pero, ¿JS puro o se vale usar framework? xD

Hahh Si, Solo con JS

 

[SEMTaurus]

Hahh Si, Solo con JS

La implementación es medio larguita. Pero basicamente tienes que implementar una función que obedezca al evento onchage y darle un delay prudencial. A grosso modo la función debe escanear la palabra que se está escribiendo, hacer un query al contenedor de datos y actualizar el DOM. Lo difícil no es hacerlo, lo difícil es optimizarlo para que no entorpezca la UX.

 

[Mr_J21]

La implementación es medio larguita. Pero basicamente tienes que implementar una función que obedezca al evento onchage y darle un delay prudencial. A grosso modo la función debe escanear la palabra que se está escribiendo, hacer un query al contenedor de datos y actualizar el DOM. Lo difícil no es hacerlo, lo difícil es optimizarlo para que no entorpezca la UX.

Soy diseñador, ya domino HTML CSS, pero soy algo nuevo en JavaScript.
Este código casi hace lo que quiero hacer.

<form autocomplete="off"><input type="text" name="q" id="q" onKeyUp="showResults(this.value)" />
<div id="result"></div>
</form>

<script>
var search_terms = ['apple', 'apple watch', 'apple macbook', 'apple macbook pro', 'iphone', 'iphone 12'];

function autocompleteMatch(input) {
if (input == '') {
return [];
}
var reg = new RegExp(input)
return search_terms.filter(function(term) {
if (term.match(reg)) {
return term;
}
});
}

function showResults(val) {
res = document.getElementById("result");
res.innerHTML = '';
let list = '';
let terms = autocompleteMatch(val);
for (i=0; i<terms.length; i++) {
list += '<li>' + terms + '</li>';
}
res.innerHTML = '<ul>' + list + '</ul>';
}
</script>

 

[SEMTaurus]

Esta bastante decente. Como te dije no es difícil, pero cuesta optimizarla. El evento onkeyup vale, pero yo en lo personal preferiría el evento onchange. Además que trataría de no escanear toda la textarea, sino solo la palabra que se esta escribiendo en ese momento.

 

[Mr_J21]

Esta bastante decente. Como te dije no es difícil, pero cuesta optimizarla. El evento onkeyup vale, pero yo en lo personal preferiría el evento onchange. Además que trataría de no escanear toda la textarea, sino solo la palabra que se esta escribiendo en ese momento.

Crees que me puedas dar una mano y hacerlo, pero sin el input debe hacerlo con textarea.

 

[SEMTaurus]

Crees que me puedas dar una mano y hacerlo, pero sin el input debe hacerlo con textarea.

Ahorita ando un poco ocupado, pero si saco algo de tiempo te ayudo. Aunque te invito a que intentes por ti mismo primero, es un buen ejercicio.

 

[Natty]

Soy medio novata, pero intentare ayudar xD

 

[bits4me]

te hice un pen, creo que puedes partir de ahi 😛

 

[Mr_J21]

Ahorita ando un poco ocupado, pero si saco algo de tiempo te ayudo. Aunque te invito a que intentes por ti mismo primero, es un buen ejercicio.

Gracias hermano, es por eso que trato de hacerlo lo más simple posible. Recuerde que solo soy un bebé en esto de JavaScript, puedo hacer que un sitio web funcione con JavaScript, como pestaña, menú, barra lateral, un poco de almacenamiento local, más como los conceptos básicos que uno aprende.

 

[Mr_J21]

Soy medio novata, pero intentare ayudar xD

Haha No importa que sea poca, toda ayuda es bien recibida.

 

[Mr_J21]

te hice un pen, creo que puedes partir de ahi 😛

Acabas de romper mi ilusión de querer aprender javascript, Jaj.
Gracias brother, No sabes cuanto me has ayudado con esto. 🙏

Pero como le comente aquel compañero:

Que siempre trato de hacerlo lo más simple posible. Recuerde que solo soy un bebé en esto de JavaScript, puedo hacer que un sitio web funcione con JavaScript, como pestaña, menú, barra lateral, un poco de almacenamiento local, más como los conceptos básicos que uno aprende.

Este código es mucho más comprensible para mí, por mi nivel de JavaScript.



Pero todavía no hace lo quiero, solo autocompleta una vez.
El código debería de funcional en los tres <textarea> que cuando ponga el cursor en uno se active el autocompensador en uno.
(Así hay menos código y no hay bucle en el código y así puedo aprender del código)

<textarea></textarea>
<textarea></textarea>
<textarea></textarea>

🙏🙏🙏 Y gracias PEN ya lo descargué

 

[bits4me]

Acabas de romper mi ilusión de querer aprender javascript, Jaj.
Gracias brother, No sabes cuanto me has ayudado con esto. 🙏

Pero como le comente aquel compañero:

Que siempre trato de hacerlo lo más simple posible. Recuerde que solo soy un bebé en esto de JavaScript, puedo hacer que un sitio web funcione con JavaScript, como pestaña, menú, barra lateral, un poco de almacenamiento local, más como los conceptos básicos que uno aprende.

Este código es mucho más comprensible para mí, por mi nivel de JavaScript.



Pero todavía no hace lo quiero, solo autocompleta una vez.
El código debería de funcional en los tres <textarea> que cuando ponga el cursor en uno se active el autocompensador en uno.
(Así hay menos código y no hay bucle en el código y así puedo aprender del código)

<textarea></textarea>
<textarea></textarea>
<textarea></textarea>

🙏🙏🙏 Y gracias PEN ya lo descargué

se mira confuso pero esta bien facil de entender, no lo termine porque mi compa el que me reto a hacer esto se fue a dormir xd
el codigo que tu enviaste tiene estructura, funciona en input y solo con la ultima palabra, eso se hace bien facil, el que tu requieres son textareas donde no se sabe si tendra un contenedor relativo, ademas en los textarea no puedes ubicar el caret [x,y] como en un contenteditable, si funciona en los 3 (la clase .notnot excluye el textarea) pero el embed de codepen no muestra valores reales del viewport.