Как в HTML хранить большой массив?

Question

[Muvka]

Хочу модифицировать написанный мной кастомный селект. Чтобы можно было вводить текст и список показывал только подходящие элементы. Поэтому решил попробовать хранить данные для списка в data атрибуте и генерировать его, когда потребуется. Да и html меньше засорен будет. Но проблема. В одном списке у меня должны быть все регионы. А это под 100 элементов. Можно ли сделать так, чтобы дата атрибут был как можно меньшего размера. Поделитесь, кто сталкивался и решал данную проблему.

Comments

[Александр]

А в js массив записывать не получиться?

[Muvka]

Ну мне из php в js надо как то передать данные для конкретного custom select. Как понять "в js массив записывать"? Лучший вариант, как по мне, это data атрибут. Но мне не хочется, чтобы в инспекторе, этот дата атрибут занимал пол экрана)

[Михаил]

Muvka, ajax не подходит?

[Muvka]

Я думал об этом, но мне кажется, что select с задержкой, это не очень хорошо.

[Антон Швец]

Muvka, в чем проблема на php сгенерировать код в виде

<script>const selectionVariants = ['var1', 'var2', 'var3'];</script>

Но вообще лучше реквестом.
И это опять таки еще одна попытка сделать то, для чего давно разработаны js-фреймворки.

[Muvka]

Антон Швец, Предлагаете для одного select подключить 100кб библиотеку vue? Здорово конечно.

[Антон Швец]

Muvka, скорее всего такие задачи потом пойдут пачками.
И кстати, runtime vue весит 60кб. jquery весит 80кб.

Answer 1

[Orbitter]

Для твоего вопроса есть нативное решение в HTML, выглядит вот так:

<input list="<идентификатор>">
<datalist id="<идентификатор>">
 <option value="Москва">
 <option value="Питер">
 <option value="Калуга">
</datalist>

Суть: будет поле в котором ты вводишь первые символы и оно тебе списком открывает подходящие варианты из тегов option.

Comments

[Muvka]

datalist не очень хорошо поддерживается и скорее всего не стилизуется. Ну и плюс это все DOM элементы.

[Orbitter]

Тогда можете использовать библиотеку Selectize.js. Это библиотека - модификатор для select'ов. Одна из возможностей - делать такие списки с подстановкой.