Все идеально в бутстрепе, только почему нельзя сделать рендеринг дропдауна на стороне сервера и получить select2. До этого момента я давно хотел поскрипеть мозгами, но вот удача, совершенно случайно наткнулся на этот код.
Для начала добавим общий скелет:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
Сделаем небольшую стилизацию инпута:
|
1 2 3 4 5 6 7 8 9 |
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 код, для выбора из списка элементов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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(); } }); |
Исходник смотреть здесь:
https://gostash.it/ru/stashes/1651-poisk-po-dropdown-v-bootstrap-bez-dopolnitelnyh-plaginov
Very good article. I certainly appreciate this site. Continue
the good work!
Классно. Сам воспользовался этим кодом только в 2020 году =)