każda strona internetowa potrzebuje paska wyszukiwania, za pomocą którego użytkownik może przeszukiwać zawartość swojego problemu na tej stronie. Podstawowy pasek wyszukiwania można utworzyć tylko przy użyciu HTML, CSS i JavaScript. Zaawansowane algorytmy wyszukiwania szukają wielu rzeczy, takich jak powiązane treści, a następnie pokazują wyniki. Ten, który zrobimy będzie szukał podłańcuchów w łańcuchu.
HTML
w tej sekcji napiszemy HTML część kodu. W HTML po prostu połączymy nasze arkusze stylów i nasz plik JavaScript., Znacznik wejściowy jest używany do tworzenia paska wyszukiwania i zawiera kilka atrybutów, takich jak typ, symbol zastępczy, nazwa. Potrzebujemy również listy przedmiotów, które będą zawierały różne nazwy zwierząt, które pozwolą nam wyszukiwać zwierzęta przez to. Klasy i ID użyte w tagach zostaną zdefiniowane w arkuszu stylów poniżej.
Wyjście:
CSS
chociaż powyższy znacznik wejściowy i uporządkowana lista wyglądają dobrze, nadal wymaga trochę stylizacji., W przypadku stylizacji paska wyszukiwania dodawane są marginesy i wyściółki, aby wyglądały czysto. Pomiary są w procentach, dzięki czemu dostosowuje się, gdy jest używany w dowolnym rozmiarze ekranu (mobilny, stacjonarny itp.). Przejście Webkit służy do zmiany szerokości paska wyszukiwania po kliknięciu. Początkowa Szerokość paska wyszukiwania wynosi 30%, ale po kliknięciu zmieni się na 70% z łatwym wejściem i wyjściem wynoszącym 0,15 sekundy.
Wyjście
po dodaniu stylizacji nasza strona powinna wyglądać tak.
Uwaga: Jeśli styl twojej strony nie ulegnie zmianie, upewnij się, że styl.,plik css znajduje się w tym samym folderze co index.html.
jest jeszcze niekompletny, ponieważ nadal potrzebujemy JavaScript, aby uzupełnić funkcjonalność tego paska wyszukiwania.
JavaScript
w kodzie HTML paska wyszukiwania, daliśmy wejście id=”searchbar” i onkeyup wywołaliśmy funkcję „search_animal”. onkeyup wywołuje funkcję za każdym razem, gdy Klawisz jest zwolniony na klawiaturze.
najpierw otrzymujemy nasze wejście za pomocą getElementById. Przekonwertuj go na małe litery, aby uniknąć wrażliwości na małe litery podczas wyszukiwania. Tablica dokumentów jest przechowywana w x. zawiera ona każdą listę, która ma id = „animals”., Następnie uruchamiana jest pętla sprawdzająca, czy innerHTML każdego dokumentu zawiera podciąg wejściowy, jeśli tak nie jest, właściwość display jest ustawiona na „None” tak, że jest niewidoczna na początku.
wyjście: