Flexdatalist - Autokompletna wtyczka ze wsparciem
The HTML5 element jest całkiem przydatny w nowoczesnym rozwoju frontendu. Jednak jest to jeden z tych elementów, o których mało kto wie.
Działa na polu wejściowym, gdzie możesz autosugestuje określone wartości dla wejścia. Domyślna konfiguracja wygląda dobrze i omówiliśmy kilka wskazówek dotyczących kodowania dotyczących budowania fajnych efektów za pomocą autosugestii danych.
Jednak jest o wiele łatwiej pracować z wtyczką Jak na przykład Flexdatalist. To obsługuje szerszą gamę przeglądarek i pozwala ci w pełni dostosuj projekt swojego datalisty.
Nie każdy potrzebuje funkcji autouzupełniania, a natywni dostawcy danych HTML5 mogą nie mieć kłopotów z wtyczką. Jednak Flexdatalist jest prawdopodobnie najlepszym, ponieważ jest opiera się na rodzimych zachowaniach danych dodać:
- Wsparcie mobilne
- Dodatkowe opisy dla każdego przedmiotu
- Opcje wielokrotnego wyboru jednocześnie
- Niestandardowe programy obsługi zdarzeń
Jego wszystko obsługiwane przez jQuery, tak zrobisz potrzebuję kopii najnowszej wersji aby to uruchomić. To także posiada własny arkusz stylów CSS które możesz połączyć w jeden plik CSS, aby zmniejszyć żądania HTTP.
Możesz znaleźć pełne instrukcje konfiguracji na głównej stronie demonstracyjnej, która zawiera pobierz linki do plików Flexdatalist.
Jest naprawdę prosty w konfiguracji tylko jedna linia JavaScript. Domyślnie wtyczka kieruje wszystkie wejścia do klasy .Flexdatalist, więc dodanie tego do kodu powinno wystarczyć, aby zobaczyć wyniki.
Po prostu dodaj element wewnątrz pola wejściowego, a Flexdatalist obsługuje resztę. Będzie automatyczna stylizacja listy, w tym opcjonalny tekst opisowy.
Najprostszym sposobem dodania dodatkowego tekstu jest przez plik JSON co możesz dołącz do swojego wejścia za pomocą atrybutu danych.
Na przykład, jeśli przejrzysz stronę demonstracyjną Flexdatalist, znajdziesz “Kraje” pole wejściowe z atrybutem data-data = 'countries.json'. To odnosi się do pliku zdalnego, który przechowuje wszystkie surowe dane wejściowe na zewnątrz.
Zbyt wiele z tych pól możesz zwolnij nieco stronę. Jednak nie mogę sobie wyobrazić, aby wiele stron uruchamiało więcej niż kilka z tych formularzy na jednej stronie, nie wspominając nawet o tej wtyczce jQuery. wciąż dość szybko.
Aby zacząć, po prostu odwiedź repozytorium GitHub i pobierz kopię. Obejmuje to link do głównej strony demonstracyjnej który ma również pełną dokumentację ustawień, opcje JavaScript i mnóstwo fragmentów przykładowych kodów do obejścia.
