выпадающий список / поле со списком автозаполнения twitter bootstrap с Knockoutjs

114

У меня есть требование, когда я ДОЛЖЕН использовать раскрывающийся список автозаполнения начальной загрузки, НО пользователь может иметь текст в свободной форме в этом раскрывающемся списке, если он желает. Прежде чем вы подумаете о TypeAhead, я мог бы использовать текстовое поле Bootstrap TypeAhead, но мне нужно иметь раскрывающийся список, потому что мы хотим указать некоторые значения по умолчанию в качестве параметров запуска на случай, если пользователи не знают, что искать.

Я использую это с MVC DropDownListFor, поскольку это создает для нас элемент управления select.

Я нашел эту статью, которая делает это за меня.

https://github.com/danielfarrell/bootstrap-combobox/pull/20

Все, что мне нужно было сделать, это убрать имя из элемента управления select, и элемент управления позволял мне вводить текст в произвольной форме. Пока все хорошо.

Теперь я использую это вместе с Knockoutjs. Я привязываю свои параметры и выбранное значение к элементу управления select, а затем в строке, отображаемой в моем шаблоне, я вызвал (selector) .combobox (), который делает элемент управления select comobobox начальной загрузки и добавляет элемент управления вводом и скрывает элемент управления select в сценах позади.

Проблема теперь в том, что когда я пытаюсь получить значения для отправки на сервер, поскольку значение, которое я ввел в поле ввода, не является допустимым вариантом из параметров, которые я дал для выбора элемента управления, он всегда устанавливает его на первый вариант по умолчанию. Это потому, что я установил привязку выбранного значения в элементе управления select, а не в поле ввода, которое было создано bootstrap-combobox.js.

Мой вопрос в том, как мне заставить поле ввода привязать данные к тому же параметру, к которому был привязан элемент управления select.

Любые другие варианты ?? Дайте мне знать, если вам нужны дополнительные разъяснения или возникнут вопросы. Пожалуйста, предложите.

Спасибо.

autocomplete combobox twitter-bootstrap knockout.js html.dropdownlistfor Кришна Теджа Вирамачанени
источник
Я нашел выход из своей ситуации. Я использовал текстовое поле TypeAhead вместо Comobox Autocomplete и по умолчанию показывал раскрывающееся меню, когда пользователи фокусировались на элементе управления или нажимали кнопку вниз. Таким образом, они знают, что они могут искать, что было моим основным требованием.
Кришна Теджа Вирамачанени

Ответы:

254

Взгляните на Select2 для Bootstrap . Он должен уметь делать все, что вам нужно.

Еще один хороший вариант - Selectize.js . Он кажется более родным для Bootstrap.

Арнольд Дэниэлс
источник
27
Как вы использовали Select2, чтобы разрешить ввод текста, который еще не был включен в источник данных?
compcentral
4
Как правильно упомянул @compcentral, Select2 НЕ РАЗРЕШАЕТ вводить что-либо, чего нет в списке параметров. Использование функции (автоматической) маркировки для имитации этого громоздко, так как она не принимает текст с пробелами внутри.
Стас Слабко
2
Какая хорошая находка! В итоге я использовал Selectize, потому что он кажется более Bootstrap-esque.
Стивен
1
Из-за проблемы, указанной @compcentral и Стасом, я выбрал selectize.js.
Neil Monroe
1
@compcentral, почему бы вам не использовать метод удаленного источника данных?
Clain Dsilva
23

Работает ли базовый список данных HTML5? Он чистый, и вам не нужно возиться с беспорядочным сторонним кодом. W3SCHOOL учебник

Документация MDN очень красноречив и приводятся примеры.

Juto
источник
3
Основная проблема HTML 5 datalistзаключается в том, что он не поддерживает никаких событий DOM. Таким образом, каждый раз, когда вы выбираете значение, вы должны выводить табуляцию из соответствующего текстового поля
Паван
@Pawan Это неправда (больше?). Вход, связанный со списком данных, по крайней мере, запускает события изменения и ввода. Посмотрите здесь , события изменения и ввода запускают журнал консоли.
Феликс Ганьон-Гренье
1
Все эти годы. Все эти годы возиться со сторонними библиотеками вместо простого и чистого уже поддерживаемого решения ...
Феликс Ганьон-Гренье,
3

Select2 для собственного плагина Bootstrap 3

https://fk.github.io/select2-bootstrap-css/index.html

этот плагин использует плагин select2 jquery

NuGet

PM> Установить-пакет Select2-Bootstrap

Махеш
источник
1
Привет. Есть ли здесь разница с первым одобренным ответом? Вы дублируете вариант выбора 2, насколько я могу судить?
Феликс Ганьон-Гренье
1

Могу ли я предложить http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html , больше похоже на предложение сообщения в Twitter, где он дает вам список пользователей или тем на основе тегов @ или #,

посмотреть демо здесь: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

в этом вы можете легко изменить @ и # на все, что захотите


источник