Jak tworzyć automatyczne uzupełnianie
- Poprzednia strona Formularz wieloetapowy
- Następna strona Zamknij automatyczne uzupełnianie
Naucz się, jak tworzyć funkcję automatycznego uzupełniania.
Automatyczne uzupełnianie
Zacznij wpisywać:
Utwórz formularz automatycznego uzupełniania
Krok 1 - Dodaj HTML:
<!-- Upewnij się, że formularz ma wyłączone automatyczne uzupełnianie: -->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Kraj">
</div>
<input type="submit">
</form>
Krok 2 - Utwórz tablicę JavaScript:
Tablica zawierająca wszystkie kraje i regiony świata:
var countries = ["Afganistan","Albania","Algieria","Andora","Angola","Anguilla","Antigua & Barbuda","Argentyna","Armenia","Aruba","Australija","Austria","Azerbejdżan","Bahamy","Bahrain","Bangladesz","Barbados","Białoruś","Belgia","Belize","Benin","Bermudy","Bhutان","Boliwia","Bośnia i Hercegowina","Botswana","Brazylia","Wyspy Dżumurrud","Brunei","Bułgaria","Burkina Faso","Burundi","Kambodża","Kamerun","Kanada","Wyspy Zielonego Przylądka","Kajmany","Republika Środkowoafrykańska","Czad","Chile","Chiny","Kolumbia","Kongo","Wyspy Cooka","Kostaryka, Wybrzeże Kości Słoniowej, Chorwacja, Kuba, Curaçao, Cypr, Czechy, Dania, Dżibuti, Dominika, Dominikanska Republika, Ekwador, Egipt, Salwador, Gwinea Równikowa, Erytrea, Estonia, Etiopia, Wyspy Falklanda, Wyspy Owcze, Fidżi, Finlandia, Francja, Francuskie Wyspy Polinezyjskie, Francuskie Wyspy Karaibskie, Gabon, Gambia, Gruzja, Niemcy, Gwinea, Gwinea Bissau, Guyana, Haiti, Honduras, Hongkong, Węgry, Islandia, Indie,Indonesia, Iran, Irak, Irlandia, Wyspa Man, Izrael, Włochy, Jamajka, Japonia, Jersey, Jordan, Kazachstan, Kenia, Kiribati, Kosowo, Kuwejt, Kirgistan, Laos, Łotwa, Liban, Lesotho, Liberia, Libia, Liechtenstein, Litwa, Luksemburg, Makao, Macedonia, Madagaskar, Malawi, Malezja, Malediwy, Mali, Malta, Wyspy Marshalla, Mauretania, Mauritius, Meksyk, Mikronesja, Mołdawia, Monako, Mongolia, Czarnogóra, Montserrat, Maroko, Mozambik, Mjanma, Namibia, NauroNepal, Holandia, Antyle Holenderskie, Nowa Kaledonia, Nowa Zelandia, Nikaragua, Niger, Nigeria, Północna Korea, Norwegia, Oman, Pakistan, Palau, Palestyna, Panama, Papua Nowa Gwinea, Paragwaj, Peru, Filipiny, Polska, Portugalia, Portoryko, Katar, Reunion, Rumunia, Rosja, Rwanda, Saint Pierre & Miquelon, Samoa, San Marino, São Tomé i Principe, Arabia Saudyjska, Senegal, Serbia, Seszele, Sierra Leone, Singapur, Słowacja, Słowenia, Wyspy Salomona, Somalia, RPA, Korea Południowa, Południowy SudanHiszpania, Sri Lanka, St. Kitts i Nevis, Saint Lucia, Saint Vincent, Sudan, Suriname, Swaziland, Szwecja, Szwajcaria, Syrię, Tajwan, Tadżykistan, Tanzania, Tajlandia, Timor Wschodni, Togo, Tonga, Trynidad i Tobago, Tunezja, Turcja, Turkmenistan, Turks i Caicos, Tuvalu, Uganda, Ukraina, Zjednoczone Emiraty Arabskie, Zjednoczone Królestwo, Stany Zjednoczone Ameryki, Urugwaj, Uzbekistan, Vanuatu, Watykan, Wenezuela, Wietnam, Wyspy Dziewicze (USA), Jemen, Zambiya, Zimbabwe;
Krok trzeci - Dodaj CSS:
Kontener musi mieć pozycję "relatywną".
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/* Kontener musi być umieszczony w relatywnej pozycji: */
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/* Automatycznie ustawić szerokość elementu automatycznego do szerokości kontenera: */
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/* Gdy mysz wskazuje na projekt: */
background-color: #e9e9e9;
}
.autocomplete-active {
/* Gdy używasz strzałek, aby przeglądać projekty: */
background-color: DodgerBlue !important;
color: #ffffff;
}
Krok 4 - Dodaj JavaScript:
funkcja autocomplete(inp, arr) {
/* Funkcja automatycznego uzupełniania wymaga dwóch parametrów, jednym z nich jest element pola tekstowego, a drugim jest tablica możliwych wartości do automatycznego uzupełniania: */
zmień currentFocus;
/* Funkcja wykonywana, gdy ktoś pisze w polu tekstowym: */
inp.addEventListener("input", function(e) {
zmień zmienną a, b, i, val = this.value;
/* Zamknij każdą otwartą listę wartości automatycznego uzupełniania */
closeAllLists();
jeśli (!val) { zwróć fałsz;}
currentFocus = -1;
/* Utwórz element DIV zawierający projekty (worthość): */
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* Dodaj ten element DIV jako podelement kontenera automatycznego uzupełniania:*/
this.parentNode.appendChild(a);
/* Przejdź przez każdy element w tablicy... */
for (i = 0; i < arr.length; i++) {
/* Sprawdź, czy projekt zaczyna się od liter identycznych jak wartość pola tekstowego: */
jeśli (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* Utwórz element DIV dla każdego pasującego elementu: */
b = document.createElement("DIV");
/* Wyróżnij pasujące litery: */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* Wprowadź pole wejściowe, aby zapisać wartość bieżącego elementu tablicy: */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* Wykonaj funkcję, gdy ktoś kliknie wartość elementu (element DIV): */
b.addEventListener("click", function(e) {
/* Wprowadź wartość pola tekstowego automatycznego uzupełniania: */
inp.value = this.getElementsByTagName("input")[0].value;
/* Zamknij listę wartości automatycznego uzupełniania, lub którąkolwiek inną otwartą listę wartości automatycznego uzupełniania: */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* Wykonaj funkcję, gdy ktoś wciska klawisz na klawiaturze: */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/* Jeśli naciśniesz strzałkę w dół, zwiększ zmienną currentFocus: */
currentFocus++;
/* I uczyni aktualny element bardziej widocznym: */
addActive(x);
} else if (e.keyCode == 38) { //up
/* Jeśli naciśniesz strzałkę w górę, zmniejsz zmienną currentFocus: */
currentFocus--;
/* I uczyni aktualny element bardziej widocznym: */
addActive(x);
else if (e.keyCode == 13) {
/* Jeśli naciśniesz klawisz ENTER, zablokuj wysyłanie formularza: */
e.preventDefault();
if (currentFocus > -1) {
/* I symuluje kliknięcie na "aktywny" element: */
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/* Funkcja klasyfikująca elementy jako "aktywne": */
if (!x) return false;
/* Najpierw usuń klasę "active" ze wszystkich elementów: */
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/* Funkcja dodająca klasę "autocomplete-active": */
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/* Funkcja usuwająca klasę "autocomplete-active" z wszystkich elementów automatycznego uzupełniania: */
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/* Zamknij wszystkie listy automatycznego uzupełniania w dokumencie, oprócz tej przekazanej jako parametr: */
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/* Funkcja wykonywana po kliknięciu w dokumencie */
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
Piąty krok - Włącz funkcję automatycznego uzupełniania w "myInput":
Przekazuje się tablicę państw jako autocomplete Drugą parametr przekazuje się funkcji:
<script>
autocomplete(document.getElementById("myInput"), countries);
</script>
- Poprzednia strona Formularz wieloetapowy
- Następna strona Zamknij automatyczne uzupełnianie
