Развитие веб-интерфейсов сопровождалось постоянным усложнением
элементов ввода данных. Обычные HTML-элементы
<select> и <input> долгое время
оставались практически неизменными, несмотря на растущие требования к
удобству интерфейсов. Стандартные выпадающие списки браузеров обладали
рядом серьёзных ограничений:
Особенно заметными эти недостатки стали после распространения одностраничных приложений (SPA), когда пользовательские интерфейсы начали напоминать полноценные десктопные приложения.
<select>Классический HTML-элемент <select> создавался как
простой механизм выбора одного или нескольких значений. Его архитектура
формировалась ещё в эпоху раннего интернета, когда вопросы визуального
дизайна и интерактивности не играли существенной роли.
Пример стандартного элемента:
<select>
<option>JavaScript</option>
<option>TypeScript</option>
<option>Python</option>
</select>Подобный элемент обладает рядом фундаментальных ограничений:
Во многих браузерах нативный <select>
отрисовывается средствами операционной системы. Это означает, что CSS
способен изменить лишь часть визуальных параметров:
sel ect {
background: #fff;
border: 1px solid #ccc;
}Однако:
При большом количестве опций использование
<select> становится неудобным:
<select>
<option>Afghanistan</option>
<option>Albania</option>
<option>Algeria</option>
<!-- сотни элементов -->
</select>Пользователь вынужден вручную прокручивать длинный список. Нативный поиск в большинстве браузеров либо отсутствует, либо реализован крайне ограниченно.
HTML поддерживает атрибут multiple:
<select multiple>
<option>Vue</option>
<option>React</option>
<option>Angular</option>
</select>Но такой интерфейс:
С середины 2010-х годов активно развивались:
Интерфейсы становились динамическими, а требования к пользовательскому опыту существенно возросли. Разработчикам понадобились компоненты, поддерживающие:
На этом фоне начали активно появляться специализированные библиотеки
для улучшения <select>.
До появления Choices.js рынок уже содержал несколько популярных решений.
Одной из наиболее известных библиотек стал Select2.
Особенности:
Пример использования:
$('select').select2();Несмотря на популярность, Select2 имел ряд недостатков:
Библиотека Chosen также пыталась улучшить стандартные select-элементы.
Пример:
$('.chosen-select').chosen();Основные проблемы Chosen:
Selectize.js объединил идеи autocomplete и select-компонентов.
Возможности:
Однако проект постепенно столкнулся с:
Одной из важнейших предпосылок создания Choices.js стал отказ сообщества от jQuery.
В начале 2010-х jQuery был практически обязательным инструментом:
$('.item').addClass('active');Он решал множество проблем:
Большинство UI-библиотек строились именно вокруг jQuery.
Со временем браузеры получили:
querySelector;fetch;classList;addEventListener;Promise;MutationObserver.Современный JavaScript стал достаточно мощным для работы без jQuery:
document.querySelector('.item').classList.add('active');Разработчики начали массово отказываться от тяжёлых jQuery-зависимостей.
Новые требования к frontend-разработке:
Именно в этот период возник спрос на библиотеку, способную заменить Select2 и Chosen без использования jQuery.
Choices.js был создан как современная альтернатива существующим select-библиотекам.
Главные цели проекта:
<select> и
<input>.Проект быстро получил популярность благодаря сочетанию простоты и функциональности.
Одним из ключевых решений стало полное отсутствие внешних зависимостей.
Подключение выглядело предельно просто:
<script src="choices.min.js"></script>Создание экземпляра:
const element = document.querySelector('select');
const choices = new Choices(element);Преимущества такого подхода:
Choices.js не заменяет полностью HTML-элемент, а строит улучшенный интерфейс поверх него.
Исходный элемент остаётся в DOM:
<select id="languages">
<option>JavaScript</option>
<option>PHP</option>
</select>После инициализации библиотека:
Такой подход обеспечивает:
Choices.js появился в эпоху активного распространения следующих интерфейсных паттернов:
Популярность интерфейсов наподобие email-клиентов привела к необходимости поддержки тегов.
Пример:
new Choices('#tags', {
removeItemButton: true
});Теперь выбранные значения отображались как отдельные элементы:
[JavaScript ×] [TypeScript ×]Современные интерфейсы требовали поиска в реальном времени:
new Choices('#countries', {
searchEnabled: true
});По мере ввода текста список автоматически фильтровался.
Frontend-приложения начали активно работать с API:
fetch('/api/users')
.then(response => response.json())
.then(data => {
choices.setChoices(data, 'id', 'name', true);
});Choices.js адаптировался под подобные сценарии.
Рост мобильного трафика стал ещё одной причиной появления более гибких select-компонентов.
Нативные select-элементы:
Choices.js пытался унифицировать поведение интерфейса между платформами.
Особенно важными стали:
В отличие от многих предшественников, Choices.js изначально ориентировался на минималистичный API.
Пример базовой инициализации:
new Choices('#example');Без сложной конфигурации библиотека уже предоставляла:
Это резко контрастировало с более тяжёлыми решениями прошлых лет.
Choices.js создавался уже в эпоху современного JavaScript.
В проекте активно использовались:
const и let.Пример архитектурного подхода:
class Choices {
constructor(element, config) {
this.element = element;
this.config = config;
}
}Это отличало библиотеку от старых jQuery-плагинов:
(function($) {
$.fn.plugin = function() {
};
})(jQuery);Важной предпосылкой успеха Choices.js стала интеграция с:
Библиотека хорошо вписывалась в npm-экосистему:
npm install choices.jsИмпорт:
import Choices fr om 'choices.js';Такой подход соответствовал современным практикам frontend-разработки.
Choices.js быстро стал популярным благодаря своей независимости от конкретного фреймворка.
Библиотеку можно использовать с:
Пример интеграции с React:
useEffect(() => {
new Choices(selectRef.current);
}, []);Главное преимущество — отсутствие привязки к внутренней архитектуре framework.
К моменту появления Choices.js требования accessibility стали значительно важнее.
Библиотека учитывала:
Пример клавиатурного взаимодействия:
Старые select-библиотеки нередко испытывали проблемы при работе с большими массивами данных.
Choices.js проектировался с расчётом на:
Особенно важным это стало для административных панелей и CRM-систем.
Интернет-пользователи постепенно привыкли к:
Обычный <select> начал восприниматься как
устаревший элемент интерфейса.
Choices.js оказался частью более глобального процесса эволюции UI-компонентов.
Создание Choices.js также стало следствием развития open-source сообщества.
GitHub существенно упростил:
Библиотека получила:
Старые библиотеки:
$('select').plugin();Choices.js:
new Choices(element);Использование ES6 позволило:
Choices.js одинаково хорошо работал:
<select>;<input>;Конфигурация оставалась компактной:
new Choices('#example', {
searchEnabled: true,
itemSelectText: '',
removeItemButton: true
});Choices.js стал представителем нового поколения frontend-библиотек:
Библиотека появилась в момент перехода индустрии:
Именно сочетание этих факторов сформировало почву для появления Choices.js и обеспечило библиотеке устойчивую популярность среди frontend-разработчиков.