Как сделать группировку элементов внутри тега?

Question

[Григорий Дудников]

Есть надобность сделать список с возможностью поиска, чтобы пользователь видел возможные варианты в выпадающем меню. Обычно это делается с помощью и внутри, как я понимаю.
Все выпадающие списки на странице сделаны с группировкой по буквам алфавита с помощью , отсюда появляется требование сделать и поле поиска с группировкой вариантов.

Пример лежит тут: jsfiddle.net/KgVv3

Исходя из моих неудачных попыток, тег не работает внутри - так как же тогда сгруппировать варианты?

Answer 1

[Максим Е]

Если правильно понял вопрос, то ответ здесь: jqueryui.com/autocomplete/#categories

Answer 2

[GM2mars]

Вот посмотрите вот эти решения:
1. groenroos.github.io/minimalect
2. brianreavis.github.io/selectize.js

Answer 3

[Иван Беленков]

к сожалению input тег не парный, потому вставить в него нельзя ничего. А datalist не поддерживает optgroup. Таким образом, единственный вариант:

<div class="search-container">
               <input type="text" class="search">
               <div class="search-variants">
               <!-- обрабатываем input AJAX`ом и выводим сюда варианты -->
               </div>
        </div>

Нашёл для вас, кстати, неплохое решение Select2