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

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

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

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

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

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

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

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

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

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

Спасибо.

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 5

Могу ли я предложить 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/

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