twitter bootstrap, автозаповнення спадного / комбінованого файлу з нокаутами


114

У мене є вимога, коли я МАЮ використовувати завантажувальний пристрій для автоматичного заповнення завантажувача, але користувач може мати текст вільної форми в цьому спадному меню, якщо він захоче. Перш ніж задуматися про TypeAhead, я міг би використати текстове поле Bootstrap TypeAhead, але мені потрібно мати спадне меню, оскільки ми хочемо надати деякі значення за замовчуванням як варіанти головного діапазону, якщо користувачі не знають, що шукати.

Я використовую це з MVC DropDownListFor, оскільки це створює контрольний режим для нас.

Я знайшов цю статтю, яка робить це для мене.

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

Все, що я повинен був зробити, - зняти ім’я з елемента управління, і контроль дозволив мені ввести текст вільної форми. Все добре поки що.

Зараз я використовую це спільно з Knockoutjs. Я прив'язую свої параметри та вибране значення до елемента керування вибору, а потім у рядку, що відображається у моєму шаблоні, я викликав (селектор) .combobox (), який робить управління вибором завантажувальним інструментом для завантаження і додає елемент керування введенням та приховує керування вибору у сценах позаду.

Проблема зараз полягає в тому, що я намагаюся змусити його значення розміщувати на сервері, оскільки значення, яке я вводив у поле введення, не є дійсними параметрами з параметрів, які я дав для вибору керування, він завжди встановлює його на перший варіант за замовчуванням. Це є тим, що я встановлюю прив'язку вибраного значення на елементі управління, а не на поле введення, яке було створено bootstrap-combobox.js.

Моє запитання - як мені отримати поле введення для прив’язки даних до тієї ж власності, до якої прив'язувався елемент вибору.

Будь-які інші варіанти ?? Повідомте мене, якщо вам потрібно більше роз’яснень або є питання. Будь ласка, підкажіть.

Дякую.


Я знайшов рішення для своєї ситуації. Я використовував текстове поле TypeAhead замість скриньки автоматичного заповнення і показував параметри випадання за замовчуванням, коли користувачі зосереджувались на керуванні або натисканням кнопки також. Таким чином, вони знають, на що вони можуть шукати, що було моєю основною вимогою.
Krishna Teja Veeramachaneni

Відповіді:


254

Погляньте на Select2 для Bootstrap . Він повинен вміти робити все необхідне.

Ще один хороший варіант - Selectize.js . Він відчуває себе трохи рідніше Bootstrap.


27
Як ви використовували Select2, щоб дозволити введення тексту, який ще не був включений у джерело даних?
концентраційний

4
Як правильно сказано в @compcentral, Select2 НЕ ДОПУСТАЄ вам вводити все, що не в списку опцій. Використання функції автоматичного тегування для імітації цього громіздкого, оскільки він не приймає текст із пробілами всередині.
Стас Слабко

2
Яка гарна знахідка! Я в кінцевому підсумку використовував Selectize, оскільки це здається більш завантажувальним.
Стівен

1
Через проблему, на яку звернули увагу @compcentral та Stas, я вирішив піти з selectize.js.
Ніл Монро

1
@compcentral чому б не скористатися методом віддаленого джерела даних?
Клін Дільва

23

Чи працює базовий даталіст HTML5? Це чисто і вам не доведеться грати з брудним стороннім кодом. Підручник W3SCHOOL

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


3
Основна проблема HTML 5 datalistполягає в тому, що він не підтримує жодних подій DOM. Тому щоразу, коли ви вибираєте значення, вам доведеться вкладати з відповідного текстового поля
Pawan

@Pawan Це неправда (вже?). Вхід, пов'язаний з пожежами даталістів, змінюється і принаймні вносить події. Подивіться тут , і зміни, і події введення ведуть журнал консолі.
Фелікс Ганьон-Греньє

1
Всі ці роки. Усі ці роки возилися з третіми сторонніми бібліотеками замість простого і чистого вже підтримуваного рішення ...
Фелікс Ганьон-Греньє

3

Виберіть2 для початкового плагіна Bootstrap 3

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

у цьому плагіні використовується плагін select2 jquery

нуті

PM> Install-Package Select2-Bootstrap


1
Привіт. Чи є різниця з першою схваленою відповіддю тут? Ви дублюєте пропозицію вибору 2, наскільки я бачу?
Фелікс Ганьон-Греньє



Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.