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

  • Autor Autor Mr_J21
  • Fecha de inicio Fecha de inicio

Mr_J21

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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

 
Última edición:
Pero, ¿JS puro o se vale usar framework? xD
 
Mr_J21 dijo:
Hahh Si, Solo con JS
Hacer clic para expandir...
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>
 
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.
 
Mr_J21 dijo:
Crees que me puedas dar una mano y hacerlo, pero sin el input debe hacerlo con textarea.
Hacer clic para expandir...
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.
 
Soy medio novata, pero intentare ayudar xD
 
te hice un pen, creo que puedes partir de ahi 😛
 
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.
Hacer clic para expandir...
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.
 
bits4me dijo:
te hice un pen, creo que puedes partir de ahi 😛
Hacer clic para expandir...
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.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Quien puede ayudarme hacer esto en JavaScript ( autocompletado textarea 📝)
Respuestas
7
Visitas
368
Mr_J21
Quién puede ayudarme a hacer esto en JavaScript (autocompletar texto 🙏 👋)
Respuestas
1
Visitas
214
YeltsinReyes
Menú
Acceder
Registro