Добрый день
Подскажите пожалуйста, как можно реализовать выпадающий список с инпутом.
Может есть какой-нибудь плагин.
1 ответ
Вот такой пример выпадающий список с инпутом с помощью datalist
:
<input type="text" name="example" list="lst">
<datalist id="lst">
<option value="One">
<option value="Two">
</datalist>
Пример использования CheckBox
внутри списка:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
Ссылка на источник ответа: How to use Checkbox inside Select Option
И немного модифицированный код из примера, получился CheckBox и инпутом внутри списка:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 300px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 300px;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First<input type="text" id="oneText" /></label>
<label for="two">
<input type="checkbox" id="two" />Second<input type="text" id="twoText" /></label>
<label for="three">
<input type="checkbox" id="three" />Third<input type="text" id="threeText" /></label>
</div>
</div>
</form>
Немного поработать со стилями, навести красоту и получится как у Вас на картинке. Вообще, можно посмотреть на стили в Bootstrap
, там достаточно красивые выпадающие списки.