Come implementare la funzione di completamento automatico JavaScript

Devi aver visto le ricerche di completamento automatico prima, ad esempio, mentre cerchi qualcosa su Google, YouTube, ecc. Forse hai osservato prima che quando abbiamo digitato una lettera in qualsiasi motore di ricerca è stata mostrata una lista filtrata contro quel particolare personaggio singolo. Come accade? È la funzione di completamento automatico che rende tutto possibile. Possono essere adottati più approcci per implementare la funzione di completamento automatico in JavaScript.

In questo articolo, impareremo un metodo molto semplice per implementare la funzionalità di completamento automatico in JavaScript e il commento sarà organizzato come segue:

• Cosa significa il completamento automatico in javascript?
• Implementazione pratica della funzione di completamento automatico in JavaScript

Quindi iniziamo!

Cosa significa il completamento automatico in javascript?

La funzione di completamento automatico in JavaScript fornisce suggerimenti pertinenti quando qualcuno inizia a digitare nel campo di testo. Ad esempio, se un utente digita il carattere "C", la funzione di completamento automatico mostrerà un elenco filtrato di tutte le parole contenenti la lettera "C".

Come utilizzare la funzione di completamento automatico in JavaScript

In questa sezione, apprendiamo tutti gli aspetti chiave necessari per implementare la funzionalità di completamento automatico JavaScript. Quindi, iniziamo con HTML:

Html

Immettere il nome dell'oggetto:

Nel frammento di cui sopra abbiamo eseguito le seguenti funzioni:

• Abbiamo utilizzato il etichetta Tag per specificare l'etichetta per il campo di testo.
• Successivamente, abbiamo utilizzato il ingresso Tag per creare un campo di input.
• Successivamente abbiamo utilizzato il
  tag per definire un elenco non ordinato.
  • Finalmente, nel sceneggiatura Tag, specifichiamo l'indirizzo del file JavaScript.

  JavaScript

  const soggetti = ['java', 'javascript', 'php', 'c ++', 'c', 'python', 'c#', 'html & css', 'r', 'swift'];
  documento.getElementById ('com').addEventListener ('input', (eve) =>
  Let SubjectSArray = [];
  Se (Eva.bersaglio.valore)
  SOGGETSARRAY = Soggetti.filtro (sub => sub.TolocalelowerCase ().Include (Eva.bersaglio.valore));
  SoggetSarray = SubjectSarray.mappa (sub => '
• $ sub
')

DisplaySubjectSarray (SubjectSarray);
);
Funzione DisplaySubjectSArray (soggettoSarray)
const html = !SoggetSarray.lunghezza ? ": SoggetSarray.giuntura(");
documento.QuerySelector ('UL').InnerHtml = html;


Il blocco di codice sopra serve le funzionalità elencate di seguito:

• In primo luogo, abbiamo creato un array chiamato "soggetti".
• Successivamente, abbiamo aggiunto un ascoltatore di eventi al Elemento che abbiamo creato nel file HTML. Per fare ciò abbiamo utilizzato il getElementById () e lo ha superato l'ID del elemento.
• Successivamente, abbiamo creato un array vuoto chiamato SoggetSarray.
• Per ottenere il valore di "ingresso"Dobbiamo utilizzare il bersaglio.valore proprietà.
• Successivamente, abbiamo utilizzato il filtro() Metodo per creare una serie di elementi filtrati.
• Successivamente, abbiamo utilizzato il carta geografica() Metodo per mettere gli elementi filtrati nell'elenco non ordinato.
• Successivamente, abbiamo creato una funzione denominata displaysubjectsarray () Per mostrare gli elementi dell'elenco.
• Nel displaysubjectsarray (), Per prima cosa utilizziamo la proprietà di lunghezza per verificare la lunghezza del soggettoray, se restituisce falso, non mostreremo nulla altrimenti solo unire all'array.

Sotto lo snippet mostrerà l'output generato dal programma di esempio sopra offerto:

Lo snippet sopra ha verificato che quando l'utente ha inserito la lettera "C", di conseguenza, la funzione di completamento automatico ha mostrato l'elenco filtrato di parole pertinenti.

Conclusione

Il aUtocompleto La funzione in JavaScript fornisce suggerimenti pertinenti quando qualcuno inizia a digitare nel campo di testo. Ad esempio, se un utente digita il carattere "j", la funzione di completamento automatico mostrerà un elenco filtrato di tutte le parole contenenti la lettera "J". In questo articolo, abbiamo imparato tutte le basi della funzione di completamento automatico con l'aiuto di esempi adatti.