Как сделать авто подтверждение?

Для реализации авто-подтверждения (autocomplete) веб-страницы с помощью JavaScript можно использовать различные подходы, например, использование HTML5 элементов <datalist> или библиотеки jQuery UI Autocomplete.

Рассмотрим использование <datalist>. Для создания автоподстановки без использования сторонних библиотек, вы можете воспользоваться элементом <datalist>. Это элемент HTML5, содержащий предварительный список вариантов для поля ввода.

Пример использования <datalist>:

<label for="fruit">Выберите фрукт:</label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
  <option value="Яблоко">
  <option value="Апельсин">
  <option value="Банан">
</datalist>

Теперь при вводе данных в поле input будут предлагаться варианты из списка <datalist>.

Если вы хотите более сложный и настраиваемый механизм автозаполнения, можете воспользоваться библиотекой jQuery UI Autocomplete. Пример использования с помощью данной библиотеки:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<label for="fruit">Выберите фрукт: </label>
<input id="fruit">

<script>
$( function() {
  var availableFruits = [
    "Яблоко",
    "Апельсин",
    "Банан"
  ];
  $( "#fruit" ).autocomplete({
    source: availableFruits
  });
});
</script>

С помощью jQuery UI Autocomplete можно настроить различные параметры, такие как задержка перед показом подсказок, кастомный отображаемый элемент и другие.

Получившиеся подсказки будут отображаться в выпадающем списке после ввода данных в поле input, позволяя пользователям быстрее заполнять формы на вашем сайте.