САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ

КАК СДЕЛАТЬ

Главная

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

КНОПКИ

Кнопки оповещенияКонтур кнопокКнопка с разделениемАнимированные кнопкиИзменяющиеся кнопкиКнопка на изображенииКнопки социальных сетейКнопки читать больше/меньшеКнопки загрузокКнопка скачатьКнопка таблеткаКнопка уведомленияКнопки значкиКнопки вперед и назадДополнительная кнопкаКнопка блокКнопка текстКруглые кнопкиКнопка прокрутки вверх

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

ФИЛЬТРЫ

Фильтр спискаФильтр таблицыФильтр элементовФильтр выпадающего спискаСортировка спискаСортировка таблицы

ТАБЛИЦЫ

Полосатая таблицаОтзывчивая таблицаТаблица сравнения

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

ВЕБ САЙТ

Сделать сайтСделать сайт (W3.CSS)Сделать сайт (BS3)Сделать сайт (BS4)Страница по центруРаздел контактаБольшой заголовокПример сайта

СЕТКА

2 Колонки макета3 Колонки макета4 Колонки макетаСетка расширяющаясяВид сетки и спискаСмешанные столбцы макетаСтолбцы карточекЗигзагообразный макетМакет блога

GOOGLE

Google графикGoogle шрифты

КОНВЕРТОРЫ

Конвертер массыКонвертер температурыКонвертер длиныКонвертер скорости

PYTHON

Удалить список дубликатовРеверс строки

Как сделать - Автозаполнение в поле ввода



Узнать, как создать автозаполнение с помощью CSS и JavaScript.


Функция автозаполнения

Начните печатать:


Редактор кода »


Создание формы автозаполнения

Шаг 1) Добавить HTML:

Пример

<!-- Убедитесь, что в форме отключена функция автозаполнения: -->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

Шаг 2) Создание массива JavaScript:

Пример

Массив всех стран в мире:

var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Канада","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","Франция","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Германия","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Мужчина","Israel","Италия","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Швеция","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp; Tobago","Tunisia","Turkey","Turkmenistan","Turks &amp; Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

Шаг 3) Добавить CSS:

Контейнер должен иметь "относительное" позиционирование.

Пример

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /* контейнер должен быть расположен относительно: */
  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;
  /* расположите элементы автозаполнения так, чтобы они имели ту же ширину, что и контейнер: */
  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 {
  /* при наведении курсора на элемент: */
  background-color: #e9e9e9;
}
.autocomplete-active {
  /* при навигации по элементам используются клавиши со стрелками: */
  background-color: DodgerBlue !important;
  color: #ffffff;
}


Шаг 4) Добавить JavaScript:

Пример

function autocomplete(inp, arr) {
  /* функция автозаполнения принимает два аргумента,
  элемент текстового поля и массив возможных значений автозаполнения: */
  var currentFocus;
  /* выполнение функции, когда кто-то пишет в текстовом поле: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* закрыть все уже открытые списки значений автозаполнения */
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /* создайте элемент DIV, который будет содержать элементы (значения): */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* добавьте элемент DIV в качестве дочернего элемента контейнера автозаполнения: */
      this.parentNode.appendChild(a);
      /* для каждого элемента в массиве... */
      for (i = 0; i < arr.length; i++) {
        /* проверьте, начинается ли элемент с тех же букв, что и значение текстового поля: */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* создайте элемент DIV для каждого соответствующего элемента: */
          b = document.createElement("DIV");
          /* сделайте соответствующие буквы жирным шрифтом: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* вставьте поле ввода, которое будет содержать значение текущего элемента массива: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* выполнение функции, когда кто-то нажимает на значение элемента (элемент DIV): */
              b.addEventListener("click", function(e) {
              /* вставьте значение для текстового поля автозаполнения: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* закройте список значений автозаполнения,
              (или любые другие открытые списки значений автозаполнения : */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* выполнение функции нажимает клавишу на клавиатуре: */
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /* Если нажата клавиша со стрелкой вниз,
        увеличение текущей переменной фокуса: */
        currentFocus++;
        /* и сделать текущий элемент более видимым: */
        addActive(x);
      } else if (e.keyCode == 38) { //вверх
        /* Если нажата клавиша со стрелкой вверх,
        уменьшите текущую переменную фокуса: */
        currentFocus--;
        /* и сделать текущий элемент более видимым: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Если нажата клавиша ENTER, предотвратите отправку формы, */
        e.preventDefault();
        if (currentFocus > -1) {
          /* и имитировать щелчок по элементу "active": */
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* функция для классификации элемента как "active": */
    if (!x) return false;
    /* начните с удаления "активного" класса для всех элементов: */
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*добавить класса "autocomplete-active": */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* функция для удаления "активного" класса из всех элементов автозаполнения: */
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /* закройте все списки автозаполнения в документе,
    кроме того, который был передан в качестве аргумента: */
    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]);
    }
  }
}
/* выполнение функции, когда кто-то щелкает в документе: */
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}

Шаг 5) Начать эффект автозаполнения на "myInput":

Пример

Передать массив стран, в качестве второго параметра функции автозаполнения :

<script>
autocomplete(document.getElementById("myInput"), countries);
</script>
Редактор кода »