Ультра простой ввод с подсказками на JavaScript / jQuery
JavaScript существует уже давно. С его помощью у нас есть бесчисленные наводящие на размышления. Самый популярный из них - typeaheadJS.
Хотя они чрезвычайно полезны, работая над недавним проектом, я обнаружил, что эти плагины чрезвычайно перегружены функциями, которые мне не нужны. После многих попыток настроить напечатанный шрифт я получил что-то вроде того, что может сделать ребенок, изучающий HTML в 6 классе.
Решение? Я сделал свой собственный простой наводящий вклад.
И все это всего в 23 строках JavaScript / jQuery!
Я считаю это очень простым, привлекательным и чрезвычайно настраиваемым. Имейте в виду, я вовсе не называю это типичной опережением. Просто потому, что он ведет себя не так, как ваш типичный типичный нападающий.
Как?
Давайте начнем с создания очень простой структуры HTML для предполагаемого ввода.
У нас есть 2 простых компонента, которые помогают с отображением:
.si-input- это поле ввода, в которое мы будем вводить текст..si-hint- это деление, в котором будет отображаться подсказка.<span>внутри него - это то место, где наша функция будет отображать первый совпадающий текст.
В нашем HTML-коде нет каких-либо стилей и он выглядит так:
Приступим к добавлению стиля и красивого вида.
Начнем с стилизации поля ввода, удаления всех границ, добавления небольшого отступа и увеличения размера шрифта.
Теперь, для нижней части, мы добавляем следующие стили, которые существенно уменьшат размер шрифта и добавят к нему цвет.
После применения всех стилей наш ввод выглядит намного лучше!
Это очень функционально с точки зрения стилизации. Вы заметите, что вопросительный знак расположен странно. Это структура out .si-hint. У нас есть <span> перед вопросительным знаком, где будет отображаться наша подсказка.
Давайте продолжим и установим для свойства visibility:hidden значение .si-hint, так как мы не хотим, чтобы оно было видимым с самого начала.
Теперь, когда разметка настроена, давайте начнем с магии JavaScript. Для простоты использования мы будем использовать jQuery. Если вы не знакомы с jQuery, обязательно попробуйте!
Начнем с создания источника данных. Это будет массив городов Таиланда (по неизвестным причинам).
Теперь, для настоящего волшебства, мы напишем эти волшебные 23 строки!
Давайте погрузимся в то, что происходит в функции.
Мы устанавливаем для переменной index значение null в начале. construedVal выполняет простую операцию замены. Например, если значение поля ввода - «Чиангмай», построенное значение будет «чиангмай». Это упрощает сопоставление регулярных выражений.
Переменная regExp содержит регулярное выражение, которое мы создали с помощью construedVal. Например, если наш .si-input имеет значение «pat», наше построенное регулярное выражение будет /pat/g, которое будет использоваться для проверки значений города.
Мы отправляем событие keyUp в область ввода, чтобы при каждом нажатии клавиши он выполнял тест для всех городов в массиве.
Наша keyUp привязка запускает проверку регулярного выражения для городов, перебирая каждый из них.
Если есть совпадение, он устанавливает значение index на индекс города, сопоставленного с регулярным выражением, и прерывает цикл.
Когда мы нажимаем ввод и если index не null, значение поля ввода устанавливается равным значению города.
И ВОЙЛА! Мы сделали!
Вот вам скрипка!
На этом мы завершаем этот простой наводящий на размышления ввод! Надеюсь, вам это поможет, ребята! :)
