Поле со списком Javascript с вводом текста и иерархическими элементами

Я хочу создать поле со списком с иерархическим списком элементов. Мне нужно иметь возможность выбирать родительские элементы, а также дочерние элементы по отдельности. Мне также нужно иметь возможность предоставлять возможности опережающего ввода для этого поля со списком.

Например, я хочу сделать выпадающий список с этими данными в JS:

Канада

--Онтарио

--Квебек

США

-- Массачусетс

--Огайо

--Техас

Из этого раскрывающегося списка я хочу иметь возможность выбирать любую из провинций/штатов по отдельности. Я также хочу иметь возможность выбрать «Канаду», не выбирая ее детей.

Я пробовал Select2 и копался в пользовательском интерфейсе JQuery, чтобы узнать, возможно ли это, но пока я не могу добиться нужного поведения. Я пишу эту страницу, используя bootstrap, но данный тип в boostrap, похоже, вообще не работает с выпадающими списками (что я вижу).


javascript jquery combobox typeahead bootstrap-typeahead
person jvoll    schedule 19.10.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Для этого вы можете использовать плагин Chosen javascript. http://harvesthq.github.com/chosen/

person Tariqulazam    schedule 19.10.2012
comment
Это сработает... за исключением того, что мне нужно иметь возможность выбирать заголовки opt-group, а не только их дочерние элементы. Я не вижу способа сделать это с Избранным. - person jvoll; 19.10.2012
comment
Это выглядит как довольно гладкий плагин. Возможно, придется дать ему вихрь в моем следующем проекте! - person mpen; 24.12.2012

arrow_upward
0
arrow_downward

Вы можете хранить настраиваемые объекты JS для каждого результата ввода, чтобы он мог отображать и хранить больше, чем просто строку (например, тип или идентификатор). Использование этого позволит вам иметь различную логику для страны и провинции/штата. Вот пример:

https://github.com/twbs/bootstrap/pull/3682

Таким образом, в функции обновления у вас может быть логика, основанная на вашем пользовательском объекте, чтобы определить, был ли нажат родительский или дочерний объект.

Что касается того, чтобы родитель выглядел иначе, чем дочерний элемент, я сам этим не пользовался, но в бутстрапе есть система шаблонов. Посмотрите эту ссылку для примера:

https://github.com/twbs/bootstrap/issues/2441

Вероятно, вы могли бы использовать это, чтобы различать внешний вид родительского и дочернего элементов.

person Kevin Lawrence    schedule 19.10.2012
comment
@webda2l Обновлено. Bootstrap был перемещен в новую учетную запись Github. - person Kevin Lawrence; 16.09.2013