Для получения полного доступа
зарегистрируйтесь

Поиск по Dropdown в Bootstrap без дополнительных плагинов


Как написали в комментариях к моему сниппету, 58kb довольно много для инпута от которого нужен только поиск.Правда этот вариант требует jQuery, но, нет проблем переписать на Vanila JS.

Покажу сразу результат того, что у нас получится:

А теперь, к делу. Для начала добавим общий скелет:

<div class="btn-group dropdown">
<button type="button" class="btn btn-outline btn-default dropdown-toggle" id="select" data-toggle="dropdown" aria-expanded="false">
  Choose item
  <span class="caret"></span>
</button>
<ul class="dropdown-menu bullet dropdown-menu-right dropdown-search-box" aria-labelledby="select" role="menu">
 <li role="presentation" class="search-box"><input type="text" class="form-control" placeholder="Type text..." value="" name="search" /></li>
 <li role="presentation" class="result"><a href="javascript:void(0)" role="menuitem">Action</a></li>
 <li role="presentation" class="result"><a href="javascript:void(0)" role="menuitem">Another action</a></li>
 <li role="presentation" class="result"><a href="javascript:void(0)" role="menuitem">Something else here</a></li>
</ul>
</div>


Сделаем небольшую стилизацию инпута:

ul.dropdown-search-box {
  max-height: 300px;
  width: 270px;
  overflow-y: auto;
}
ul.dropdown-search-box .search-box {
  padding: 0 5px 5px 5px;
  border-bottom: 1px solid #ddd;
}


И наконец-то, добавляем JS код, для выбора из списка элементов:

var ul = $('.dropdown-search-box');
var input = ul.find('input');
var li = ul.find('li.result');

input.keyup(function(){
  var val = $(this).val();

  if ( val.length > 1 ) {
    li.hide();
    li.filter(':contains("'+ val +'")').show();
  } else {
    li.show();
  }
});

Оригинал сниппета, вы можете найти ниже по ссылке. Я его немного доработал, в плане кода и UI.

Источник

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация