Пример:

Установка:

• Подключаем оригинальный CSS autocomplete.css или используемый в этом примере at-autocomplete.css
• Подключаем оригинальный JS autocomplete.js или с изменениями at-autocomplete.js, в котором полностью скрыт список для выбора при отсутствии совпадений.

• Добавляем к текстовому полю input нужный ID

  <input type="text" id="city" />

  и инициализируем с нужными настройками:

  $('#city').autocomplete({
   dataSource: cityList,
   valueProperty: 'Id',
   textProperty: 'Name',
   allowCustomValue: true
});

  где cityList - массив с данными для автозаполнения вида:

  const cityList = [
   {Id:1,Name:'Адыгейск'},
   {Id:2,Name:'Майкоп'},
   {Id:3,Name:'Горно-Алтайск'},
      /* еще данные */
   {Id:1108,Name:'Углич'},
   {Id:1109,Name:'Ярославль'}
];

Настройки:

Имя	По умолчанию	Описание
dataSource	[]	Название массива данных для вывода пользователю
valueProperty	null	Свойство со значением массива
textProperty	null	Текстовое свойство массива
defaultValue	-	Значение по умолчанию, присвоенное текстовому полю
keyboardDelay	500	Задержка в миллисекундах при наборе текста
closeOnSelect	true	Закрытие раскрывающегося списка при выборе
allowCustomValue	false	Разрешение вводить пользовательское значение
showDropdownOnFocus	true	Показывать автозаполнение в фокусе текстового поля
showDropdownOnLoad	false	Показать выпадающий список при загрузке страницы
selectedClass	-	Пользовательский класс, который добавляется к выбранному элементу
wrapClass	-	Пользовательский класс, который добавляется к контейнеру раскрывающегося списка
onClick	null	Функция обратного вызова, которая срабатывает при выборе элемента
onChange	null	Функция обратного вызова, которая срабатывает при изменении значения