Bootstrap 4 input drop-down-list. How? - html

Question

Below is a sample of a button dropdown I've customized with material icons and the google roboto mono font which is great for spacing. My question is how can I get an input to behave in the same manner?
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- GOOGLE FONT CSS - Roboto Mono -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet">
<!-- GOOGLE FONT CSS - Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- FORM-ROW -->
<div class="form-row mb-2">
<!-- ROW > COLUMN -->
<div class="col">
<!-- <label for="dropDown1" class="small my-0">DROPDOWN 1</label> -->
<!-- DROPDOWN -->
<div class="dropdown">
<!-- BUTTON -->
<button class="btn btn-outline-dark btn-block rounded-0" type="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex justify-content-start align-items-center">
<i class="material-icons md-24 mr-2">double_arrow</i>
<span class="mr-auto" id="dropDownClockProjectText">DROPDOWN 1</span>
<i class="material-icons md-24">expand_more</i>
</div>
</button>
<!-- DROPDOWN > MENU -->
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1">
<!-- MENU - HEADER -->
<!-- <h6 class="dropdown-header">Dropdown header</h6> -->
<!-- <div class="dropdown-divider"></div> -->
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="1" href="#">ITEM 1</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="2" href="#">ITEM 2</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="3" href="#">ITEM 3</a>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
If I convert the button to an input of type text, the goal would be to type into it and display the filtered list of results. Kind like a google but the data being filtered is already downloaded by the time the user types to filter.

Answer 1

Alright. So, after a little more paying around I have come up with this solution. It would be nice to know how to get rid of the dropdown-dividers that had their respective links hidden during filtering.
// List Filter
$(document).ready(function() {
// On KeyUp...
$("#inputText9").on("keyup", function() {
// No results have been found yet
let result_found = false;
// All values typed in to lower case...
var search_string = $(this).val().toLowerCase();
$("#dropDown9 a").filter(function() {
// Hide if it does not match
$(this).toggle($(this).text().toLowerCase().indexOf(search_string) > -1);
if ($(this).text().toLowerCase().indexOf(search_string) > -1) {
// Results found
//$("#no_search_results").hide();
result_found = true;
}
// No results found
if (!result_found) {
//$("#no_search_results").show();
}
});
});
});
.material-icons.md-24 { font-size: 24px; }
.dropdown-menu-scrollable {
height: auto;
max-height: 244px; /* 5 items */
overflow-x: hidden;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- GOOGLE FONT CSS - Roboto Mono -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet">
<!-- GOOGLE FONT CSS - Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="form-row mb-2">
<!-- ROW > COLUMN -->
<div class="col">
<!-- <label for="dropDown1" class="small my-0">DROPDOWN 1</label> -->
<!-- DROPDOWN -->
<div class="dropdown">
<!-- DROPDOWN > TOGGLER -->
<!-- <a class="btn btn-secondary btn-block dropdown-toggle rounded-0" href="#" role="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 1
</a> -->
<button class="btn btn-dark btn-block rounded-0" type="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex justify-content-start align-items-center">
<i class="material-icons md-24 mr-2">done</i>
<span class="mr-auto" id="dropDownClockProjectText">DROPDOWN FILTER</span>
<i class="material-icons md-24">expand_more</i>
</div>
</button>
<!-- DROPDOWN > MENU -->
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1" id="dropDown9">
<!-- MENU - HEADER -->
<!-- <h6 class="dropdown-header">Dropdown header</h6> -->
<!-- <div class="dropdown-divider"></div> -->
<!-- INPUT TEXT -->
<div class="col mb-2">
<!-- <label for="inputText1">inputText1</label> -->
<input type="text" class="form-control rounded-0" id="inputText9" aria-describedby="inputText1Desc" placeholder="Filter dropdown-items..">
</div>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="1" href="./">dropdown-item 1</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="2" href="./">dropdown-item 2</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="3" href="./">dropdown-item 3</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="4" href="./">dropdown-item 4</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="5" href="./">dropdown-item 5</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="6" href="./">dropdown-item 6</a>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
Search by number for highest specificity.

Answer 2

This should help you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Dropdown Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<select class="custom-select">
<option selected><i class="fa fa-angle-double-right"></i>Dropdown 1</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
This is my best example. I don't think you can add a custom font because Bootstrap has its own font installed. I don't think you can add icons either, because I tried to in the example.