Zbudowanie własnego paska wyszukiwania z autouzupełnianiem jest łatwiejsze niż myślisz.
Pasek wyszukiwania to popularny element interfejsu użytkownika, z którego korzysta wiele nowoczesnych witryn internetowych. Jeśli tworzysz witrynę zawierającą dane dowolnego typu, możesz chcieć, aby użytkownicy mogli wyszukiwać określone elementy.
Istnieje wiele sposobów na zbudowanie paska wyszukiwania. Możesz tworzyć złożone paski wyszukiwania, które zwracają wyniki na podstawie wielu filtrów, takich jak imię i nazwisko lub data. Istniejące biblioteki mogą pomóc w zaimplementowaniu paska wyszukiwania bez budowania go od zera.
Można jednak również utworzyć prosty pasek wyszukiwania przy użyciu zwykłego JavaScript, który porównuje dane wprowadzone przez użytkownika z listą ciągów znaków.
Jak dodać interfejs użytkownika do paska wyszukiwania
Twoja witryna powinna zawierać pole wprowadzania, w którym użytkownicy będą mogli wpisać szukany tekst. Jednym ze sposobów na to jest użycie znacznika wejściowego i nadanie mu stylu, aby wyglądał jak pasek wyszukiwania.
- Utwórz folder do przechowywania swojej witryny. Wewnątrz folderu utwórz plik HTML o nazwie indeks.html.
- Wypełnij swój plik podstawową strukturą dokumentu HTML. Jeśli nie znasz HTML, jest ich wiele Przykłady kodu HTML, których możesz się nauczyć aby pomóc Ci nabrać tempa.
<!doctype html>
<język html="en-USA">
<głowa>
<tytuł>Pasek wyszukiwania</title>
</head>
<ciało>
<klasa div="pojemnik">
<!-- Treść strony idzie tutaj-->
</div>
</body>
</html> - Wewnątrz elementu div klasy kontenera dodaj znacznik wejściowy. Umożliwi to użytkownikowi wpisanie tekstu, który chciałby wyszukać. Za każdym razem, gdy wprowadzą nowy znak, Twoja witryna wywoła funkcję search(). Tę funkcję utworzysz w późniejszych krokach.
Atrybut autouzupełniania zapewnia, że przeglądarka nie doda własnego menu rozwijanego na podstawie poprzednich wyszukiwanych haseł.<klasa div="pojemnik">
<h2>Wyszukaj kraje</h2>
<wprowadź identyfikator ="pasek wyszukiwania" autouzupełnianie="wyłączony" onkeyup="szukaj()" typ="tekst"
imię="szukaj" symbol zastępczy="Czego szukasz?">
</div> - W tym samym folderze co twój indeks.html plik, utwórz nowy plik CSS o nazwie style.css.
- Wypełnij plik stylem dla całej strony internetowej i paska wyszukiwania:
ciało {
margines: 0;
wypełnienie: 0;
kolor tła: #f7f7f7;
}
* {
rodzina czcionek: "Arial", bezszeryfowe;
}
.pojemnik {
wypełnienie: 100px 25%;
wyświetlacz: elastyczny;
kierunek zginania: kolumna;
wysokość linii: 2rem;
rozmiar czcionki: 1.2em;
kolor: #202C39;
}
#pasek wyszukiwania {
wypełnienie: 15px;
promień obramowania: 5px;
}
wejście[typ=tekst] {
-webkit-przejście: szerokość 00,15słatwość wsiadania;
przemiana: szerokość 00,15słatwość wsiadania;
} - W indeks.html, dodaj link do swojego pliku CSS wewnątrz tagu head i pod tagiem title:
<link rel="arkusz stylów" href="style.css"> - Otworzyć indeks.html plik w przeglądarce internetowej i wyświetl interfejs użytkownika paska wyszukiwania.
Jak utworzyć ciągi list dla paska wyszukiwania
Zanim użytkownik będzie mógł wyszukiwać, musisz utworzyć listę dostępnych elementów, które będzie mógł wyszukiwać. Możesz to zrobić za pomocą tablicy ciągów znaków. Ciąg jest jednym z wielu typów danych, których można używać w JavaScripti może reprezentować sekwencję znaków.
Możesz dynamicznie tworzyć tę listę za pomocą JavaScript, podczas ładowania strony.
- Wewnątrz indeks.html, pod znacznikiem wejściowym dodaj element div. Ten div wyświetli listę rozwijaną zawierającą listę elementów pasujących do tego, czego szuka użytkownik:
<identyfikator div="lista"></div> - W tym samym folderze co twój indeks.html plik i style.css plik, utwórz nowy plik o nazwie skrypt.js.
- Wewnątrz skrypt.js, utwórz nową funkcję o nazwie loadSearchData(). Wewnątrz funkcji zainicjuj tablicę z listą ciągów znaków. Pamiętaj, że jest to mała, statyczna lista. Bardziej złożona implementacja będzie musiała uwzględniać przeszukiwanie większych zbiorów danych.
funkcjonowaćzaładuj dane wyszukiwania() {
// Dane do wykorzystania w pasku wyszukiwania
pozwalać kraje = [
'Australia',
'Austria',
'Brazylia',
'Kanada',
'Dania',
'Egipt',
'Francja',
'Niemcy',
'USA',
'Wietnam'
];
} - Wewnątrz funkcji loadSearchData() i pod nową tablicą pobierz element div, który wyświetli użytkownikowi pasujące elementy wyszukiwania. Wewnątrz elementu div listy dodaj znacznik zakotwiczenia dla każdego elementu danych na liście:
// Pobierz element HTML listy
pozwalać lista = dokument.getElementById('lista');
// Dodaj każdy element danych jako plik etykietka
Państwa.dla każdego((kraj)=>{
pozwalać = dokument.createElement("a");
a.innerText = kraj;
a.listaklas.add("element listy");
lista.appendDziecko (a);
}) - W tagu ciała indeks.html, dodaj atrybut zdarzenia onload, aby wywołać nową funkcję loadSearchData(). Spowoduje to załadowanie danych podczas ładowania strony.
<obciążenie ciała ="loadSearchData()"> - W indeks.html, zanim tag body się skończy, dodaj tag script, aby połączyć go z plikiem JavaScript:
<obciążenie ciała ="loadSearchData()">
<!-- Treść Twojej strony internetowej -->
<źródło skryptu="skrypt.js"></script>
</body> - W style.css, dodaj stylizację do listy rozwijanej:
#lista {
obramowanie: 1px jednolity jasnoszary;
promień obramowania: 5px;
Blok wyświetlacza;
}
.element listy {
wyświetlacz: elastyczny;
kierunek zginania: kolumna;
dekoracja tekstu: brak;
wypełnienie: 5px 20px;
czarny kolor;
}
.element listy:unosić się {
kolor tła: jasnoszary;
} - otwarty indeks.html w przeglądarce internetowej, aby wyświetlić pasek wyszukiwania i listę dostępnych wyników wyszukiwania. Funkcja wyszukiwania jeszcze nie działa, ale powinieneś zobaczyć interfejs użytkownika, z którego będzie korzystać:
Jak utworzyć listę rozwijaną z pasującymi wynikami w pasku wyszukiwania
Teraz, gdy masz pasek wyszukiwania i listę ciągów znaków do wyszukiwania przez użytkowników, możesz dodać funkcję wyszukiwania. Gdy użytkownik wpisze tekst w pasku wyszukiwania, będą wyświetlane tylko niektóre pozycje na liście.
- W style.css, zastąp styl listy, aby domyślnie ukryć listę:
#lista {
obramowanie: 1px jednolity jasnoszary;
promień obramowania: 5px;
Nie wyświetla się;
} - W skrypt.js, utwórz nową funkcję o nazwie search(). Należy pamiętać, że program wywoła tę funkcję za każdym razem, gdy użytkownik wprowadzi lub usunie znak z paska wyszukiwania. Niektóre aplikacje będą wymagały podróży do serwera w celu pobrania informacji. W takich przypadkach ta implementacja może spowolnić interfejs użytkownika. Może być konieczne zmodyfikowanie implementacji, aby wziąć to pod uwagę.
funkcjonowaćszukaj() {
// tutaj znajduje się funkcja wyszukiwania
} - Wewnątrz funkcji search() pobierz element HTML div dla listy. Uzyskaj również elementy tagu zakotwiczenia HTML każdego elementu na liście:
pozwalać listaKontener = dokument.getElementById('lista');
pozwalać lista elementów = dokument.getElementsByClassName('listItem'); - Uzyskaj dane wejściowe wprowadzone przez użytkownika w pasku wyszukiwania:
pozwalać wejście = dokument.getElementById('pasek wyszukiwania').wartość
input = input.toLowerCase(); - Porównaj dane wprowadzone przez użytkownika z każdą pozycją na liście. Na przykład, jeśli użytkownik wprowadzi „a”, funkcja porówna, czy „a” znajduje się w „Australii”, następnie „Austria”, „Brazylia”, „Kanada” i tak dalej. Jeśli pasuje, wyświetli ten element na liście. Jeśli nie pasuje, ukryje ten element.
pozwalać brak wyników = PRAWDA;
dla (i = 0; I < lista elementów.długość; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="nic";
Kontynuować;
}
w przeciwnym razie {
listItems[i].style.display="przewód";
brak wyników = FAŁSZ;
}
} - Jeśli na liście nie ma żadnych wyników, całkowicie ukryj listę:
listContainer.style.display = brak wyników? "nic": "blok"; - Kliknij na indeks.html plik, aby otworzyć go w przeglądarce internetowej.
- Zacznij wpisywać w pasku wyszukiwania. Podczas wpisywania lista wyników będzie aktualizowana i będzie wyświetlać tylko pasujące wyniki.
Używanie paska wyszukiwania do wyszukiwania pasujących wyników
Teraz, gdy wiesz, jak utworzyć pasek wyszukiwania z wyborem ciągu, możesz dodać więcej funkcji.
Na przykład możesz dodać linki do tagów zakotwiczenia, aby otwierać różne strony w zależności od wyniku kliknięcia przez użytkownika. Możesz zmienić pasek wyszukiwania, aby przeszukiwać bardziej złożone obiekty. Możesz także zmodyfikować kod, aby działał z frameworkami, takimi jak React.
