выпадающий список / поле со списком автозаполнения 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.

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

Спасибо.


Я нашел выход из своей ситуации. Я использовал текстовое поле 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 очень красноречив и приводятся примеры.


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/

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.