Hvordan implementere JavaScript AutoComplete -funksjon

Du må ha sett de autofullførte søkene før, for eksempel mens du søker noe på Google, YouTube osv. Kanskje du har observert før det når vi skrev et brev i en hvilken som helst søkemotor, en filtrert liste viste mot den aktuelle enkeltkarakteren. Hvordan skjer det? Det er den autofullføringsfunksjonen som gjør det hele mulig. Flere tilnærminger kan tas i bruk for å implementere den automatiske funksjonen i JavaScript.

I denne oppskrivningen lærer vi en veldig grunnleggende metode for å implementere den autofullføringsfunksjonen i JavaScript, og oppskrivningen vil bli organisert som følger:

• Hva betyr autofullfør i JavaScript?
• Praktisk implementering av AutoComplete -funksjonen i JavaScript

Så la oss komme i gang!

Hva betyr autofullfør i JavaScript?

AutoComplete -funksjonen i JavaScript gir relevante forslag når noen begynner å skrive inn tekstfeltet. For eksempel, hvis en bruker skriver tegnet "C", vil den autofullføringsfunksjonen vise en filtrert liste over alle ordene som inneholder "C" -brevet.

Hvordan bruke autofullfør funksjonen i JavaScript

I denne delen lærer vi alle viktige aspekter som er nødvendige for å implementere JavaScript AutoComplete -funksjonen. Så la oss begynne med HTML:

Html

Skriv inn emnetavn:

I ovennevnte utdrag utførte vi følgende funksjoner:

• Vi benyttet oss av merkelapp Tag for å spesifisere etiketten for tekstfeltet.
• Deretter benyttet vi inngang Tag for å lage et inngangsfelt.
• Etterpå benyttet vi
  Tag for å definere en uordnet liste.
  • Til slutt, i manus Tag, vi spesifiserer adressen til JavaScript -filen.

  JavaScript

  const fag = ['java', 'javascript', 'php', 'c ++', 'c', 'python', 'c#', 'html & css', 'r', 'swift'];
  dokument.getElementById ('com').AddEventListener ('input', (Eve) =>
  La emnesArray = [];
  hvis (Eve.mål.verdi)
  emnerArray = fag.filter (sub => sub.tolocalelowercase ().Inkluderer (Eve.mål.verdi));
  ENTAGSARRAY = ENTAGSArray.Kart (sub => '
• $ sub
')

DisplaysubjectSarray (emnesArray);
);
funksjon displaysubjectSarray (emnesArray)
const html = !ENTAGSARRAY.lengde ? ": EmnetsArray.bli med(");
dokument.QuerySelector ('UL').indrehtml = html;


Ovennevnte kodeblokk serverer nedenfor listede funksjonaliteter:

• For det første opprettet vi en matrise som heter “emner”.
• Deretter la vi til en hendelseslytter til element som vi opprettet i HTML -filen. For å gjøre det utnyttet vi getElementById () og ga den IDen til element.
• Deretter opprettet vi et tomt utvalg som heter ENTAGSARRAY.
• For å få verdien av “inngang”Vi må bruke mål.verdi eiendom.
• Deretter benyttet vi filter() Metode for å lage en rekke filtrerte elementer.
• Deretter benyttet vi kart() Metode for å sette de filtrerte elementene i den uordnede listen.
• Etterpå opprettet vi en funksjon som heter displaysubjectSarray () For å vise elementene på listen.
• I displaysubjectSarray (), Vi bruker først lengdeegenskapen for å sjekke lengden på emnearray, hvis den returnerer falsk, ville vi ikke vise noe annet enn å bli med i matrisen.

Under utdraget viser utdata generert av det ovennevnte eksempelprogrammet:

Ovennevnte utdrag bekreftet at når brukeren skrev inn bokstaven “C”, følgelig viste den autofullføringsfunksjonen den filtrerte listen over relevante ord.

Konklusjon

A-enUtstyr Funksjon i JavaScript gir relevante forslag når noen begynner å skrive inn tekstfeltet. For eksempel, hvis en bruker skriver tegnet "j", vil den autofullføringsfunksjonen vise en filtrert liste over alle ordene som inneholder "J" -brevet. I denne oppskrivningen har vi lært alle det grunnleggende om den autofullføringsfunksjonen ved hjelp av passende eksempler.