AJAX Input search field (Автокомплит списка городов)

"Впечатление по тестовому прекрасное." © СКБ-Контур

Good starting secure build for Express + PostgreSQL.

Technologies: ES5, ES6, Express (+ Helmet, Express Rate Limit, Express validator, Compression), Handlebars, PostgreSQL, Sequelize.

Installation

npm install
install PostgreSQL 9.6 -> import DATABASE ./autocomplete.sql
configure \server\config\config.json

Usage

set NODE_ENV=production
gulp dist
npm run start

Примечаение

Решение по сложившейся у меня традиции имеет два варианта:

• чистый ES5 ./src/javascripts/live-search.es5.js

• чистый ES6 ./src/javascripts/live-search/main.js

Варианты оптимизации для уменьшения нагрузки на сервер

• в // throttle увеличить время;
• проверять минимальное количество символов для отправки на сервер;
• кэшировать поиск на сервере;
• предупреждать пользователя о неверной раскладке, ввод только допустимых символов;
• если поиск ничего не нашел, не делать новых запросов при добавлении символов в конце или в начале строки (в решении используется регистронезависимый поиск iLike %string%).

Для пользовательского счастья:

• убрать throttle (можно на сервере лимитировать запросы в ./app.js (limiter);
• делать выборку из базы на основе региона/частотности/настроек пользователя.

P.S

Автор, считает, что в ТЗ не хватает следующих пунктов:

• Потеря фокуса без выбора пункта из списка -> Если список успел загрузиться, но значение не соответствует ни одному в списке -> Показываем ошибку

• Обработки подсказок по клику мыши

• Выбор первой при Enter

Задание

Реализовать веб-интерфейс и клиентскую логику функциональности "автокомплит списка городов".

Условия

Полное описание работы функциональности и внешнего вида: https://g.kontur.ru/controls/autocomplete/

Основные шрифтовые параметры: font: 14px “Segoe UI”; color: #404040; line-height: 20px.

Необходимый минимум для рассмотрения на вакансию: реализация веб-интерфейса и клиентской логики без работы с клавиатурой, кроме той, что относится к вводу данных в input и без опций / надстроек (необходимы пункты 1-30, 59-64).

В реализации решения вы можете использовать любые технологии, которые демонстрируют ваши знания и навыки.

Данные для автокомплита использовать из файла в приложении.

Задание «под звездочкой»: реализуйте функциональность полностью и обеспечьте кроссбраузерность (все популярные браузеры и IE9).

Оформление решения

Решением будет являться архив с именем “Фамилия_Имя.zip”, в котором находятся некие файлы, которые при запуске выдают в браузере желаемый результат.

Напутствие

К тестовому заданию следует относиться как к упрощенной аналогии настоящего технического задания. Проверяя тестовое задание, рецензент оценивает не только подход к решению, но и критерии качества самого Кандидата.

То есть результатом выполнения тестового задания должно быть идеально написанное с точки зрения Кандидата решение, готовое для production. Протестированное, удовлетворяющее исходному техническому заданию, имеющее максимально аккуратный и чистый код (для простой дальнейшей поддержки).