раскрывающийся список автозаполнения Twitter bootstrap / combobox с Knockoutjs

У меня есть требование, где я должен использовать раскрывающийся список автозаполнения bootstrap, но пользователь может иметь текст свободной формы в этом раскрывающемся списке, если они хотят. Прежде чем вы подумаете о TypeAhead, я мог бы использовать Bootstrap typeahead textbox, но мне нужно иметь раскрывающийся список, потому что мы хотим дать некоторые значения по умолчанию в качестве параметров headstart в случае, если пользователи не знают, что искать.

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

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

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

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

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

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

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

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

спасибо.

6 ответов


посмотреть Select2 для Bootstrap. Он должен быть в состоянии сделать все, что вам нужно.

еще один хороший вариант-это Selectize.js. Он чувствует себя немного более родным для Bootstrap.


работает ли базовый HTML5 datalist? Это чисто, и вам не нужно играть с грязным сторонним кодом... W3SCHOOL учебник


Select2 для Bootstrap 3 родной плагин

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

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

NuGet для

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


топливо UX combobox имеет все функции, которые вы ожидаете.


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

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

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


Bootstrap Tokenfield тоже кажется хорошим:http://sliptree.github.io/bootstrap-tokenfield/