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

Mr_J21 · 5 Dic 2022

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 · 5 Dic 2022

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

Mr_J21 · 5 Dic 2022

moon-ra dijo:
Pero, ¿JS puro o se vale usar framework? xD

Hahh Si, Solo con JS

SEMTaurus · 5 Dic 2022

Mr_J21 dijo:
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 · 5 Dic 2022

moon-ra dijo:
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 · 5 Dic 2022

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 · 5 Dic 2022

moon-ra dijo:
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 · 5 Dic 2022

Mr_J21 dijo:
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 · 5 Dic 2022

Soy medio novata, pero intentare ayudar xD

bits4me · 6 Dic 2022

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

Mr_J21 · 6 Dic 2022

moon-ra dijo:
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 · 6 Dic 2022

Natty dijo:
Soy medio novata, pero intentare ayudar xD

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

Mr_J21 · 6 Dic 2022

bits4me dijo:
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 · 6 Dic 2022

Mr_J21 dijo:
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.

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

Mr_J21

SEMTaurus

Mr_J21

SEMTaurus

Mr_J21

SEMTaurus

Mr_J21

SEMTaurus

Natty

bits4me

Mr_J21

Mr_J21

Mr_J21

bits4me

Temas similares