Cómo implementar la función de autocompletar de JavaScript

Debe haber visto las búsquedas de autocompletación antes, por ejemplo, mientras busca algo en Google, YouTube, etc. Tal vez haya observado antes que cuando escribimos una letra en cualquier motor de búsqueda, una lista filtrada mostró contra ese carácter único particular. Cómo sucede? Es la característica de autocompletar la que lo hace todo posible. Se pueden adoptar múltiples enfoques para implementar la función de autocompletar en JavaScript.

En este artículo, aprenderemos un método muy básico para implementar la función de autocompletar en JavaScript, y la redacción se organizará de la siguiente manera:

• ¿Qué significa autocompletar en JavaScript??
• Implementación práctica de la función autocompleta en JavaScript

Entonces empecemos!

¿Qué significa autocompletar en JavaScript??

La función de autocompletar en JavaScript da sugerencias relevantes cuando alguien comienza a escribir en el campo de texto. Por ejemplo, si un usuario escribe el personaje "C", la función de autocompletar mostrará una lista filtrada de todas las palabras que contienen la letra "C".

Cómo usar la función automática en JavaScript

En esta sección, aprendemos todos los aspectos clave que son necesarios para implementar la función JavaScript AutoComplete. Entonces, comencemos con el HTML:

Html

Ingrese el nombre del sujeto:

En el fragmento anterior realizamos las siguientes funciones:

• Utilizamos el etiqueta etiqueta para especificar la etiqueta para el campo de texto.
• A continuación, utilizamos el aporte Etiqueta para crear un campo de entrada.
• Después utilizamos el
  Etiqueta para definir una lista desordenada.
  • Finalmente, en el guion Etiqueta, especificamos la dirección del archivo JavaScript.

  Javascript

  const temas = ['java', 'javascript', 'php', 'c ++', 'c', 'python', 'c#', 'html & css', 'r', 'swift'];
  documento.getElementById ('com').addEventListener ('input', (eve) =>
  Dejar sujetsArray = [];
  if (eve.objetivo.valor)
  SujetsArray = sujetos.filtro (sub => sub.tolocalelowercase ().Incluye (Eva.objetivo.valor));
  SujetsArray = SujetsArray.mapa (sub => '
• $ sub
')

DisplaySubjectSArray (SujetSArray);
);
función displaySubjectSArray (SujetSArray)
const html = !sujeto.longitud ? ": Sujeto.unirse(");
documento.QuerySelector ('ul').innerhtml = html;


El bloque de código anterior sirve a las funcionalidades enumeradas a continuación:

• En primer lugar, creamos una matriz llamada "asignaturas".
• A continuación, agregamos un oyente de eventos al elemento que creamos en el archivo HTML. Para hacer eso, utilizamos el getElementById () y lo pasó la identificación del elemento.
• A continuación, creamos una matriz vacía llamada sujeto.
• Para obtener el valor de "aporte"Tenemos que utilizar el objetivo.valor propiedad.
• A continuación, utilizamos el filtrar() Método para crear una variedad de elementos filtrados.
• A continuación, utilizamos el mapa() Método para colocar los elementos filtrados en la lista desordenada.
• Después, creamos una función llamada DisplaySubjectSArray () Para mostrar los elementos de la lista.
• En el DisplaySubjectSArray (), Primero utilizamos la propiedad de longitud para verificar la longitud del SaterterArray, si devuelve falso, entonces no mostraríamos nada de lo contrario solo unirnos a la matriz.

A continuación, el fragmento mostrará la salida generada por el programa de ejemplo dado anteriormente:

El fragmento anterior verificó que cuando el usuario ingresó la letra "C", en consecuencia, la característica de autocompletar mostró la lista filtrada de palabras relevantes.

Conclusión

La Autocompleto La característica en JavaScript ofrece sugerencias relevantes cuando alguien comienza a escribir en el campo de texto. Por ejemplo, si un usuario escribe el personaje "j", la función de autocompletar mostrará una lista filtrada de todas las palabras que contienen la letra "j". En este artículo, hemos aprendido todos los conceptos básicos de la característica de autocompleto con la ayuda de ejemplos adecuados.