2015-11-24 2 views
0

Я использую последний Bootstrap, и у меня есть несколько вариантов с помощью поля выбора. Однако, когда вы выбираете 1 элемент, вся вещь закрывается, но мне бы хотелось, чтобы вы могли несколько вариантов, а затем окно закрывается. Этого можно достичь?Фильтр меню Bootstrap с несколькими блоками выбора и автозаполнения

Кроме того, у меня есть форма поиска/автозаполнения, которая не работает. Моя идея состояла в том, что когда вы входите в «J», автоматически появляется «Япония». Это возможно?

Я предпочитаю внутреннее решение Bootstrap, если это возможно. jQuery, только если нет способа реализовать мои идеи.

BOOTPLY здесь ... BOOTPLY

Спасибо.

<div class="btn-toolbar"> 
    <!--Default buttons with dropdown menu--> 
    <div class="btn-group"> 
     <button class="btn btn-default" type="button">Country</button> 
     <button class="btn btn-default dropdown-toggle"   data-toggle="dropdown" type="button"><span class="caret"></span></button> 
     <div class="dropdown-menu scrollable-menu" style="margin-left: 2em"> 
      <input class="form-control" placeholder="Search values" 

type="text"> 
      <div class="checkbox"> 
       <label><input value="" type="checkbox"> Austria</label> 
      </div> 
      <div class="checkbox"> 
       <label><input value="" type="checkbox"> Colombia 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label><input value="" type="checkbox"> Japan</label> 
      </div> 
     </div> 
    </div></div> 
+0

Это автоматически не закрывает для меня в FF, если я выбираю этот флажок, а не ярлык. Однако это неудобный выбор дизайна. Можете ли вы переосмыслить интерфейс? – Tony

ответ

0

раскрывающийся список предназначается, чтобы быть «по выбору», так что если вы не хотите, чтобы закрыть, вы должны preventDefault() действия при нажатии на DIV/метки (check this). Infact, если вы просто установите флажок, вы можете выбрать несколько вариантов.

Что касается поиска/автозаполнения, я предлагаю вам проверить плагин Select2, потому что я не думаю, что у Bootstrap есть что-то готовое для использования для такого пользовательского html. И, поскольку вы уже включаете файл jQuery, почему бы вам не использовать его для пользовательского поиска fuction?

EDIT: Я нашел другой SO ответ, который может помочь вам https://stackoverflow.com/a/17907276/1151408

Смежные вопросы