autocompletar con sugerencias en línea en un área de texto

Answer

1. 

   davy.ai

   July 26, 2023 at 2:15 am

   Sí, es posible implementar la funcionalidad de autocompletado en un textarea utilizando JavaScript.

   Una forma de abordarlo es utilizar el evento input para escuchar los cambios en el valor del textarea y actualizar dinámicamente una lista de sugerencias en función de la entrada actual. Luego, puedes utilizar el evento keydown para escuchar una pulsación de tecla (como la tecla TAB) que active la selección de una sugerencia de la lista.

   Aquí están los pasos básicos para implementar esta funcionalidad:

   1. Crear un array de sugerencias que se utilizará para poblar la lista de sugerencias.
   2. Escuchar el evento input en el textarea.
   3. Cuando se desencadene el evento input, obtener el valor actual del textarea y utilizarlo para filtrar el array de sugerencias. Esto se puede hacer utilizando el método filter y una expresión regular.
   4. Actualizar la lista de sugerencias con las sugerencias filtradas.
   5. Escuchar el evento keydown en el textarea.
   6. Cuando se desencadene el evento keydown, verificar si la tecla pulsada es la tecla TAB (keyCode 9).
   7. Si se pulsa la tecla TAB y hay una sugerencia seleccionada en la lista, insertar la sugerencia en el textarea y borrar la lista de sugerencias.

   Aquí tienes un código de ejemplo que muestra esta aproximación:

   const textarea = document.querySelector('textarea');
   const suggestions = ['aquí viene la sugerencia', 'otra sugerencia', 'más sugerencias'];
   
   let suggestionList = document.createElement('ul');
   suggestionList.classList.add('suggestion-list');
   document.body.appendChild(suggestionList);
   
   textarea.addEventListener('input', () => {
     let inputValue = textarea.value.toLowerCase();
     let filteredSuggestions = suggestions.filter(suggestion =>
       suggestion.toLowerCase().startsWith(inputValue)
     );
     suggestionList.innerHTML = '';
     filteredSuggestions.forEach(suggestion => {
       let listItem = document.createElement('li');
       listItem.textContent = suggestion;
       listItem.addEventListener('click', () => {
         textarea.value = suggestion;
         suggestionList.innerHTML = '';
       });
       suggestionList.appendChild(listItem);
     });
   });
   
   textarea.addEventListener('keydown', e => {
     if (e.keyCode === 9 && suggestionList.innerHTML !== '') {
       e.preventDefault();
       let selectedSuggestion = document.querySelector('.selected');
       if (selectedSuggestion) {
         textarea.value = selectedSuggestion.textContent;
         suggestionList.innerHTML = '';
       }
     }
   });
   
   

   En este ejemplo, se utiliza el evento input para filtrar el array de sugerencias y actualizar la lista de sugerencias. El evento click en cada elemento de la lista de sugerencias se utiliza para insertar la sugerencia en el textarea cuando se hace clic en ella. El evento keydown se utiliza para detectar la pulsación de la tecla TAB e insertar la sugerencia seleccionada en el textarea. La clase selected se utiliza para indicar cuál es la sugerencia actualmente seleccionada en la lista.

Comments are closed.