как создать автоматическое завершение

изучите, как создать функцию автоматического завершения.

автоматическое завершение

начните вводить:

Попробуйте сами

создание формы с автоматическим завершением

первый шаг - добавление 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>

второй шаг - создание JavaScript массива:

массив, содержащий все страны и регионы мира:

var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central African Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Коста-Рика, Кот-д’Ивуар, Хорватия, Куба, Кюрасао, Кипр, Чешская Республика, Дания, Джибути, Доминика, Доминиканская Республика, Эквадор, Египет, Сальвадор, Гвинея-Эquinorea, Эритрея, Эстония, Эфиопия, Фолклендские острова, Оркнейские острова, Фиджи, Финляндия, Франция, Французская Полинезия, Французские Антильские острова, Габон, Гамбия, Грузия, Германия, Гана, Гибралтар, Греция, Гренландия, Гренада, Гуам, Гватемала, Гернси, Гвинея, Гвинея-Бисау, Гайана, Гаити, Гондурас, Гонконг, Венгрия, Исландия, Индия,Индонезия, Иран, Ирак, Ирландия, Острво Мэн, Израиль, Италия, Ямайка, Япония, Джерси, Иордания, Казахстан, Кения, Кирибати, Косово, Кувейт, Киргизстан, Лаос, Латвия, Ливан, Лесото, Либерия, Ливия, Лихтенштейн, Литва, Люксембург, Макао, Македония, Мадагаскар, Мали, Мальта, Маршалловы Острова, Мавритания, Маврикий, Мексика, Микронезия, Молдова, Монако, Монголия, Черногория, Монтсеррат, Марокко, Мозамбик, Мьянма, Намибия, Науру"Непал","Нидерланды","Нидерландские Антильские острова","Новая Каледония","Новая Зеландия","Никарагуа","Нигер","Нигерия","Корейская Народная Демократическая Республика","Норвегия","Оман","Пакистан","Палау","Палестина","Панама","Папуа – Новая Гвинея","Парагвай","Перу","Филиппины","Польша","Португалия","Пуэрто-Рико","Катар","Реюньон","Румыния","Россия","Руанда","Сен-Пьер и Мiquelon","Самоа","Сан-Марино","Сан-Томе и Принсипе","Саудовская Аравия","Сенегал","Сербия","Сейшельские острова","Сьерра-Леоне","Сингапур","Словакия","Словения"," Соломоновы Острова","Сомали","Южная Африка","Южная Корея","Южный Судан"Испания, Шри-Ланка, Сент-Китс и Невис, Сент-Люция, Сент-Винсент, Судан, Суринам, Свазиленд, Швеция, Швейцария, Сирия, Тайвань, Таджикистан, Танзания, Таиланд, Тимор-Лешти, Того, Тонга, Тринидад и Тобаго, Тунис, Турция, Туркменистан, Turks and Caicos, Tuvalu, Уганда, Украина, Объединенные Арабские Эмираты, Великобритания, Соединенные Штаты Америки, Уругвай, Узбекистан, Вануату, Ватикан, Венесуэла, Вьетнам, Виргинские острова (США), Йемен, Замбия, Зимбабве;

Шаг 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: */
        currentFocus++;
        /* И делает текущий элемент более заметным: */
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /* Если нажата клавиша向上箭头, уменьшает переменную currentFocus: */
        currentFocus--;
        /* И делает текущий элемент более заметным: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Если нажата клавиша ENTER, предотвращает отправку формы: */
        e.preventDefault();
        if (currentFocus > -1) {
          /* И имитировать клик по "активному" элементу: */
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* Функция классификации элементов как "активных": */
    if (!x) return false;
    /* Сначала удалите класс "active" из всех элементов: */
    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) {
    /* Функция удаления класса "autocomplete-active" из всех элементов: */
    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);
});
}

Пятый шаг - включите функцию автоматического завершения ввода в "myInput":

Сделайте массив стран в качестве autocomplete Функция второго параметра передается:

<script>
autocomplete(document.getElementById("myInput"), countries);
</script>

Попробуйте сами