How can I create a drop-down list in Bootstrap 4 input?

Displayed below is an example of a customized button dropdown featuring material icons and the Google Roboto Mono font, ideal for optimal spacing. My inquiry pertains to replicating this behavior with an input field.

<!-- 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 were to transform the button into a text input, I aim for users to be able to enter text and have it filter through a pre-downloaded list of results, similar to a Google search functionality but with already retrieved data.

htmlcssbootstrap-4

Answer №1

After some experimentation, I have developed a solution to address the issue of removing the dropdown-dividers that are 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">
  <div class="col">
    <div class="dropdown">
      <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>
  
      <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1" id="dropDown9">
      
        <div class="col mb-2">
          <input type="text" class="form-control rounded-0" id="inputText9" aria-describedby="inputText1Desc" placeholder="Filter dropdown-items..">
        </div>
        
        <a class="dropdown-item searchable" data-item-id="1" href="./">dropdown-item 1</a>
       
        <a class="dropdown-item searchable" data-item-id="2" href="./">dropdown-item 2</a>
        
        <a class="dropdown-item searchable" data-item-id="3" href="./">dropdown-item 3</a>
        
        <a class="dropdown-item searchable" data-item-id="4" href="./">dropdown-item 4</a>
       
        <a class="dropdown-item searchable" data-item-id="5" href="./">dropdown-item 5</a>
        
        <a class="dropdown-item searchable" data-item-id="6" href="./">dropdown-item 6</a>
        

      </div>
    </div>
  </div>
</div>

Search by number for highest specificity.

Answer №2

Take a look at this:

<!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 the finest example I have for you. It may not be possible to customize fonts or include icons because Bootstrap already has its own styles and icons integrated.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize UI Kit to incorporate fluid margins dynamically

How can I dynamically add internal margins between cards in a responsive layout? The following code ensures responsiveness: Large Screens display 4 Cards. Medium Screens display 3 Cards. Small Screens display 2 Cards. Micro Screens display 1 Card. &l ...

htmlcssflexboxgetuikit

Add a pair of assorted div elements to a shared container

I have two different sections with classes named "red" and "blue". By default, these sections are hidden. I want to duplicate them and display them in a single container named "cont". The red button appends the red section and the blue button appends the b ...

javascriptjqueryhtmlcss

Steps to insert a large image into a div while maintaining the size ratio

https://i.sstatic.net/WvBbF.png I'm struggling to add a logo to the right corner of this div The logo size is too big and it doesn't adjust properly to the existing div height and width Below is the code I've tried, but the image is ruini ...

htmlcss

Creating multiple autocomplete fields using HTML5 and MySQL can greatly enhance user experience on your website

Looking to streamline the data entry process into a MySQL database, I am creating a simple HTML input page. To make input faster, I want to incorporate autocomplete fields. After finding a helpful script here and making some adjustments, the code now looks ...

phpmysqlhtmlautocomplete

Adding a code for divs into CSS caused the navigation bar to be completely obliterated

Initially, my menu was perfectly styled with the following CSS code in my css file: ul.Menu { list-style-type: none; margin: 10px; overflow: hidden; background-color: #ffffff; border-style: solid; border-color: #e9055c; border-width: 2px; font-weight: bol ...

htmlcss

Trouble arises when attempting to compare two JSON files with an undefined issue

data-info.json {"price-comparison":[[{"Price":"0.0"},{"Code":"C0358102"}],[{"Price":"2.0"},{"Code":"C0876548"}]],"isEmployeeOJ":"Y"} script.js var dataInfo = $http.get("data/data-info.json").then(function (response) { $scope.dataInfo = response.data; ...

javascripthtmlangularjsjson

Hide specific content while displaying a certain element

Creating three buttons, each of which hides all content divs and displays a specific one when clicked. For instance, clicking the second button will only show the content from the second div. function toggleContent(id) { var elements = document.getEl ...

javascripthtmljquerycss

What is the best way to adjust my column position in order to make the links clickable?

Looking for help with a mobile version website menu bar design. The issue is that the central "+" button is covering the two icons on either side, making them unclickable. Is there a solution to rearrange this layout? Here is the current design: https:// ...

htmlcssbootstrap-4

Saving and retrieving user input as a variable using Javascript and HTML local storage

This is the foundation of my HTML page. When the "remember text" paragraph is clicked, the data in the input text box is saved to local storage as a string. Clicking the "recall text" paragraph loads the stored data into the "recalled text" paragraph. I am ...

javascriptandroidhtmlcordovalocal-storage

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

javascripthtmlcssscrollanchor

Retrieve information using Angular's EventEmitter

Recently I started learning Angular and encountered a challenging issue that has kept me occupied for the past few hours. I have implemented a parent-child relationship between two components, with a need to share a boolean variable from the parent to the ...

htmlangulartypescript

The nth-child selector fails to function properly with a customized MUI component in CSS

I've created a styled component as shown below: const FormBox = styled(Box)(({ theme }) => ({ width: "47vw", height: "25vh", backgroundColor: theme.palette.grey[100], borderRadius: theme.shape.borderRadius, marginLeft: ...

javascriptcssreactjsmaterial-ui

When clicking on an HTML link pointing to a cloud, it does not open in the same frame but instead opens in a new window

I am currently working on an HTML5 application that features a screen divided into two parts. The left part of the screen contains a few links, and upon clicking one of these links, the resulting content should open in the right side frame within the same ...

javascripthtml

Implementing Vue.js - Applying a Class on Click Behavior

Is there a way in Vue.js to dynamically toggle a class on a click event for a div without relying on properties or data? Take a look at this div: <div class="quiz-item" @click="checkAnswer(1)"> Upon clicking this div, I want to add either the clas ...

javascriptcsseventsonclickvue.js

Using AJAX to showcase data from a table in a database using the <select> tag but with an unfinished submit process

I am encountering an issue with my code. When I submit the value in getinv.php, it only returns a partial value. For example, when I click '2016-08-27', it only retrieves '2016'... My question is, how can I ensure that the exact value ...

javascriptphpjqueryhtmlajax

Tips on traversing a JSON array in AngularJS using the ng-repeat directive

My service returns the following JSON data: {"categories":[{"category_id":"20","name":"Desktops"}, {"category_id":"18","name":"Laptops &amp;"},{"category_id":"25","name":"Components"}, {"category_id":"57","name":"Tablets"}, {"category_id":"17","name": ...

javascripthtmlangularjsjson

How can I locate the ID of the HTML input element with jQuery?

I am trying to create a page with a button that looks like this: <input type="button" id="btnAddBusinessUnit" value="Add Business Unit" class="clsAddBusinessUnit" alt="testBtn" /> When the button is clicked, I want to display the id 'btnAddBus ...

javascriptjqueryasp.nethtml

I'm looking for a button that, when clicked, will first verify the password. If the password is "abcd," it will display another submit button. If not, it

<form action="#" method="post" target="_blank"> <div id = "another sub"> </br> <input type = "password" size = "25px" id="pswd"> </br> </div> <button><a href="tabl ...

javascripthtml

Obtain JSON information and insert it into an HTML element

I'm currently faced with an issue regarding JSON data (fetching and posting it). Below is the code I have used, but unfortunately it is not working and I am unsure why. Upon checking with Firebug, it indicates the response as: 200 OK sourceforge.net 1 ...

javascriptjqueryhtmljson

Navigate through the website by transforming the arrow and clicking the link

I am struggling with transitioning my arrow from › (right) to ˇ (down) when toggled. I can't figure out where to place it. If you look at Menu 1 > Submenu 1 > Text with hyperlink I want the 'Text with Hyperlink' to be clickable on ...

javascripthtmlcss