Jak utworzyć datalistę To natychmiastowe wyszukiwanie

Listy rozwijane są dobrym rozwiązaniem zapewnienie opcji dla pola wejściowego, szczególnie gdy lista dostępnych opcji jest długa. Użytkownik może wybrać żądaną opcję wpisując w pole, lub przejrzyj opcje które mogą pasować do tego, czego szukają. Możliwość przeszukiwania opcji, jednak jest idealnym rozwiązaniem.

To zachowanie można osiągnąć za pomocą Element HTML wyświetla sugestie wejściowe dla różnych elementów sterujących, takich jak etykietka. jednak pokazuje tylko dostępne opcje, gdy użytkownik je posiada już coś wpisałem w polu wprowadzania.

Możemy uczynić pole wejściowe bardziej użytecznym, jeśli umożliwiamy użytkownikom dostęp do pełnej listy opcji w dowolnym momencie podczas procesu wprowadzania danych.

W tym poście zobaczymy, jak utworzyć rozwijana lista, którą można przeszukiwać w dowolnym momencie używając etykietka jest taki sam jak ID z tag - w ten sposób łączymy je ze sobą.

2. Spraw, aby Datalist był widoczny

Domyślnie Element HTML to ukryty. Możemy to zobaczyć tylko wtedy, gdy my zacznij wpisywać dane wejściowe w pole, do którego dołączony jest datalista.

Istnieje jednak sposób na „wymuszenie” zawartości datalizatora (tj. Wszystkich jego opcji) pojawiać się na stronie. Musimy tylko nadać mu odpowiedni pokaz wartość nieruchomości inny niż Żaden, na przykład Blok wyświetlacza;.

 datalist display: block;

Wyświetlane opcje nie można jeszcze wybrać w tym momencie tylko przeglądarka wyświetla opcje znajduje się wewnątrz datalisty.

Jak wspomniano wcześniej, ze względu na wbudowane zachowanie element, część opcji już się pojawi i można ją wybrać, ale tylko wtedy, gdy użytkownik zacznie wpisywać ciąg, do którego może użyć przeglądarki znajdź opcję dopasowania.

Musimy także znaleźć mechanizm do wykonania wszystko opcje (na powyższym obrazku wyświetlanym pod rozwijanym datalistą) do wyboru w dowolny inny punkt procesu pobierania danych wejściowych - gdy użytkownicy chcą sprawdzić opcje przed wpisaniem czegokolwiek lub gdy coś już wprowadzili do pola wejściowego.

3. Przynieś Element HTML.

Wybierzemy drugą metodę, ponieważ jest prostsza i można ją używać jako mechanizm awaryjny w przeglądarkach, które nie obsługują element. Gdy przeglądarka nie może renderować i wyświetlać danych, to renderuje Tag HTML, kod wygląda jak poniżej:

Datalist Combined with Dodawanie wielokrotność przypisać do znacznik, dzięki czemu gdy użytkownik wybierze opcję z listy rozwijanej, jej wartość zostanie wyświetlona wewnątrz pole. / * gdy użytkownik wybierze opcję z DDL, zapisz ją w polu tekstowym * / select.addEventListener ('change', fill_input); funkcja fill_input () input.value = options [this.selectedIndex] .value; hide_select (); Wady Główną wadą tej techniki jest brak bezpośredniego sposobu na styl element z CSS (wygląd i