Quien puede ayudarme hacer esto en JavaScript ( autocompletado textarea 📝)

  • Autor Autor Mr_J21
  • Fecha de inicio Fecha de inicio
Mr_J21

Mr_J21

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Quien puede ayudarme hacer esto en JavaScript ( autocompletado textarea 📝)

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>

Textarea.webp
 
Última edición:
Gracias, fmogro, pero me gustaría hacer esto solo en JavaScript.
 

Google Search

www.google.com

ahi tienes decenas de ejemplos, con JS plano/vanilla. Creo que no hay mucho que explicar es bastante fácil y lo explican muy bien en los primeros enlaces
 
Solo tienes que validar el value del textarea, una ves detectes un : o @ agregas un div con bonones que autocompleten el valor del textarea y listo. tambien puedes usar un find que busque un objecto/array las semejas a X palabra.
 
Hadrien Rivere dijo:
Solo tienes que validar el value del textarea, una ves detectes un : o @ agregas un div con bonones que autocompleten el valor del textarea y listo. tambien puedes usar un find que busque un objecto/array las semejas a X palabra.
Hacer clic para expandir...
Soy diseñador ya dominio el HTML CSS, pero soy algo nuevo en el JavaScript crees que me pueda dar una manos y hacerlo con un array y enviármelo por aquí (We.tl). Me gustaría seleccionarlo con el teclado las opciones

¿Es posible hacer un autocompletado con una lista para agregar texto, punto, comas, dentro de <textarea> con un Array que pueda seleccionarlo con el teclado?
 
Mr_J21 dijo:
Soy diseñador ya dominio el HTML CSS, pero soy algo nuevo en el JavaScript crees que me pueda dar una manos y hacerlo con un array y enviármelo por aquí (We.tl). Me gustaría seleccionarlo con el teclado las opciones

¿Es posible hacer un autocompletado con una lista para agregar texto, punto, comas, dentro de <textarea> con un Array que pueda seleccionarlo con el teclado?
Hacer clic para expandir...
Mira recien acabo de hacerlo algo basico pero funciona "Quizas te ayude".


HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <style>
    .hide {
      display: none;
    }
  </style>
  <body>
    <div id="hide" class="hide" onclick="addText(event)">
      <ul>
        <li>Hola mundo</li>
        <li>Hola user</li>
        <li>texto alternativo</li>
        <li>Hola a ti</li>
      </ul>
    </div>
    <textarea rows="" cols="" id="myInput" onkeydown="validar()"></textarea>
  </body>
  <script>
    const validar = (event) => {
     event.preventDefualt()
      const getValue = document.querySelector("#myInput").value;

      if (getValue.includes("@") || getValue.includes(":")) {
        const showDiv = (document.querySelector("#hide").style =
          "display: block;");
      }
    };

    const addText = (event) => {
      var targ = event.target || event.srcElement;
      document.getElementById("myInput").value +=
        targ.textContent || targ.innerText;
      const showDiv = (document.querySelector("#hide").style =
        "display: none;");
    };
  </script>
</html>
 
Última edición:
Hadrien Rivere dijo:
Mira recien acabo de hacerlo algo basico pero funciona "Quizas te ayude".


HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <style>
    .hide {
      display: none;
    }
  </style>
  <body>
    <div id="hide" class="hide" onclick="addText(event)">
      <ul>
        <li>Hola mundo</li>
        <li>Hola user</li>
        <li>texto alternativo</li>
        <li>Hola a ti</li>
      </ul>
    </div>
    <textarea rows="" cols="" id="myInput" onkeydown="validar()"></textarea>
  </body>
  <script>
    const validar = (event) => {
     event.preventDefualt()
      const getValue = document.querySelector("#myInput").value;

      if (getValue.includes("@") || getValue.includes(":")) {
        const showDiv = (document.querySelector("#hide").style =
          "display: block;");
      }
    };

    const addText = (event) => {
      var targ = event.target || event.srcElement;
      document.getElementById("myInput").value +=
        targ.textContent || targ.innerText;
      const showDiv = (document.querySelector("#hide").style =
        "display: none;");
    };
  </script>
</html>
Hacer clic para expandir...
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>

Me comparte tu WhatsApp: así te muestro lo que hago
Textarea.png
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

Mr_J21
Quién me puede ayudar a hacer esto en JavaScript (autocompletador textarea 📝)
Respuestas
13
Visitas
531
bits4me
bits4me
Mr_J21
Quién puede ayudarme a hacer esto en JavaScript (autocompletar texto 🙏 👋)
Respuestas
1
Visitas
214
YeltsinReyes
YeltsinReyes
isispe
alguien puede ayudarme hacer un logo??
Respuestas
5
Visitas
579
rmullen
rmullen
Atrás
Arriba