Jak zaimplementować funkcję AutoComplete JavaScript

Musiałeś widzieć wyszukiwania autouzupełniania wcześniej, na przykład podczas wyszukiwania czegoś w Google, YouTube itp. Może zauważyłeś wcześniej, kiedy wpisowaliśmy list w dowolnej wyszukiwarce, filtrowana lista pokazana w stosunku do tego konkretnego pojedynczego znaku. Jak to się stało? To funkcja autocomplete, która sprawia, że ​​wszystko jest możliwe. Można przyjąć wiele podejść do wdrożenia automatycznej funkcji w JavaScript.

W tym zapisie nauczymy się bardzo podstawowej metody wdrożenia funkcji autocomplete w JavaScript, a zapis zostanie zorganizowany w następujący sposób:

• Co oznacza autocomplete w JavaScript?
• Praktyczne wdrożenie funkcji autocomplete w JavaScript

Więc zacznijmy!

Co oznacza autocomplete w JavaScript?

Funkcja AutoComplete w JavaScript przedstawia odpowiednie sugestie, gdy ktoś zaczyna pisać w polu tekstowym. Na przykład, jeśli użytkownik wpisuje znak „C”, funkcja autocomplete wyświetli filtrowaną listę wszystkich słów zawierających listę „C”.

Jak używać funkcji autocomplete w JavaScript

W tej sekcji uczymy się wszystkich kluczowych aspektów niezbędnych do wdrożenia funkcji AutoComplete JavaScript. Zacznijmy więc od HTML:

Html

Wprowadź nazwę tematu:

W powyższym fragmencie wykonaliśmy następujące funkcje:

• Wykorzystaliśmy etykieta znacznik, aby określić etykietę dla pola tekstowego.
• Następnie wykorzystaliśmy wejście tag, aby utworzyć pole wejściowe.
• Następnie wykorzystaliśmy
  tag, aby zdefiniować listę nieopisaną.
  • Wreszcie w scenariusz tag, określamy adres pliku JavaScript.

  JavaScript

  const tematy = [„java”, „javascript”, „php”, „c ++”, „c”, „python”, „c#”, „html & css”, „r”, „Swift”];
  dokument.getElementById („com”).addEventListener ('input', (eve) =>
  niech podmiotów = [];
  if (Ewa.cel.wartość)
  podmioty = podmioty.filtr (sub => sub.Tolocalelowercase ().Obejmuje (Ewa.cel.wartość));
  podmioty =array.Mapa (sub => '
• $ sub
')

wyświetlacz podjeżdżalnia (podmiot podmiotu);
);
funkcja Wyświetlacz BEZUCTSArray (UTAMESSArray)
const html = !OBSŁUGI.długość ? ": OBSŁUGI.dołączyć(");
dokument.querySelelector („ul”).innerhtml = html;


Powyższy blok kodu obsługuje poniższe funkcje:

• Po pierwsze, stworzyliśmy tablicę o nazwie „badani".
• Następnie dodaliśmy słuchacz wydarzeń do element, który utworzyliśmy w pliku HTML. Aby to zrobić, wykorzystaliśmy getElementById () i przekazał to identyfikator element.
• Następnie stworzyliśmy pustą tablicę nazwaną OBSŁUGI.
• Aby uzyskać wartość „wejście„Musimy wykorzystać cel.wartość nieruchomość.
• Następnie wykorzystaliśmy filtr() metoda utworzenia tablicy filtrowanych elementów.
• Następnie wykorzystaliśmy mapa() metoda umieszczania filtrowanych elementów na liście nieopisanej.
• Następnie stworzyliśmy funkcję o nazwie wyświetlacz bilecidsarray () Aby pokazać elementy listy.
• w wyświetlacz bilecidsarray (), Najpierw wykorzystujemy właściwość długości, aby sprawdzić długość podmiotu, jeśli zwróci false, nie pokazalibyśmy niczego inaczej, po prostu dołącz do tablicy.

Poniżej fragment wyświetli dane wyjściowe wygenerowane przez powyższy przykładowy program:

Powyższy fragment zweryfikował, że kiedy użytkownik wprowadził literę „C”, w konsekwencji funkcja autocomplete pokazała filtrowaną listę odpowiednich słów.

Wniosek

AUdocomplete Funkcja w JavaScript daje odpowiednie sugestie, gdy ktoś zaczyna pisać w polu tekstowym. Na przykład, jeśli użytkownik wpisuje znak „J”, funkcja autocomplete wyświetli filtrowaną listę wszystkich słów zawierających listę „J”. W tym artykule nauczyliśmy się wszystkich podstaw funkcji autocomplete za pomocą odpowiednich przykładów.