Задачка: сделай страничку, на ней текстовое поле. В него пользователь вводит название города, и по мере ввода появляются выпадающие подсказки, как в Google.
Поиск идет по первым буквам, например при вводе «Нов» появляется:
- Нижний Новгород
- Новогород
- Новые Васюки
Введенная часть текста подсвечивается в подсказке.
Список городов можешь взять с википедии ( http://ru.wikipedia.org/wiki/Города_Европы_с_населением_более_500_тысяч_человек )
В подсказке выводится не более 5 городов. Города сортируются по 2 критериям:
- город в той же стране что и пользователь
- по убыванию населения
К примеру, пользователь из России первым увидит Москву и Санкт-Петербург, из Британии — Лондон. Страну пользователя можно прописать прямо в коде, пусть это будет Россия, предполагается что она определяется автоматически. Список городов тоже можно заложить в код.
Горячие клавиши: Esc — закрывает список, вниз ↓ — раскрывает если он закрыт, ↓/↑/PgUp/PgDn — навигация по списку клавишами, пробел/Enter — выбор города и закрытие списка (повторное нажаитие Enter отправляет форму и не должно перехватываться). При уходе фокуса с поля список сам закрывается и раскрывается назад при фокусировке поля.
Усложнения:
- Поиск должен пониамть ввод названия города как на русском, так и на английском языке.
- добавь возможность искать по отдельным буквам с пропусками, например мск -> Москва
- добавь синонимы, например Питер -> Санкт-петербург.
- (хард моде) обеспечь правильный поиск при наличии небольших опечаток например Маск -> Москва
- (хард моде) подключи поиск по огромной базе городов вконтакте: https://vk.com/dev/database.getCities
Задание удобно показывать на jsbin или jsfiddle.
Код автокомплита должен быть универсальным, то есть мы должны иметь возможность например легко сделать из него автокомплит по фамилиям, не переделвыая код. Используй ООП, разумеется.
Верстка должна быть надежной и должна не ломаться, если мы например зададим инпуту другие размеры или шрифт (т.е. если ты размеры выпадающей подсказки жестко захардкодил это не есть хорошо).
То есть должен получиться простой компонент, который мы можем без лишних настроек подключить на любую страницу.