placing a dropdown menu below the search bar

Question

placing a dropdown menu below the search bar

Let's say I have a container with an input search field. My goal is to position a select dropdown right below the search input, ensuring that the dropdown has the same width as the search input (similar to autocomplete functionality). Here's what I've attempted so far:

        <div class="container position-relative" id="wrapper">
    <div class="row mb-3">
        <div class="col">
            <div class="row float-right mr-0">
                <form class="form-inline">
                    <div class="input-group">
                        <input class="form-control ml-sm-2" type="text" id="searchUser" placeholder= "Search by Name or Username...." aria-label="Search">
                        <span class="input-group-append" id="searchBtn">
                         <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="position-absolute" style="width:400px; z-index: 1; right:0; top:45px; ">
        <div class="form-group">
            <select multiple class="form-control" id="exampleFormControlSelect2">
                <option>1</option>
            </select>
        </div>
    </div>
</div>

Does anyone have suggestions on how to make this work?

Here's what it currently looks like:

https://i.sstatic.net/KNCy8.png

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

To achieve your desired result, you can utilize the power of css box-sizing. Below is a simple code snippet provided for better clarity:

#input1, #select1{
    width:100px;
    border:1px solid black;
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box; 
}

<form>
<input type="text" id="input1" placeholder="input box"><br />
<select id="select1">
<option>1</option>
<option>2</option>
</select>
</form>

Answer 2

To achieve your desired result, you can utilize the power of css box-sizing. Below is a simple code snippet provided for better clarity:

#input1, #select1{
    width:100px;
    border:1px solid black;
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box; 
}

<form>
<input type="text" id="input1" placeholder="input box"><br />
<select id="select1">
<option>1</option>
<option>2</option>
</select>
</form>

Answer 3

Answer №2

It might be helpful for you to explore Bootstrap CSS and familiarize yourself with the classes designed for forms. Forms can be styled as either inline or horizontal. By adding the form-inline class to your forms, it allows for the controls to align on the same line. Here's a snippet of code that should assist in resolving your issue:

<div class="container" id="wrapper">
 <form class="form-horizontal">
        <div class="row ">
                <div class="input-group col-5">
                    <input class="form-control " type="text" id="searchUser" placeholder= "Search by Name or Username...." aria-label="Search">
                    <span class="input-group-append" id="searchBtn">
                     <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
                    </span>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-5">
                     <select multiple class="form-control" id="exampleFormControlSelect2">
                        <option>1</option>
                    </select>
                 </div>
            </div>
        </div>
       </form>
</div>

Answer 4

It might be helpful for you to explore Bootstrap CSS and familiarize yourself with the classes designed for forms. Forms can be styled as either inline or horizontal. By adding the form-inline class to your forms, it allows for the controls to align on the same line. Here's a snippet of code that should assist in resolving your issue:

<div class="container" id="wrapper">
 <form class="form-horizontal">
        <div class="row ">
                <div class="input-group col-5">
                    <input class="form-control " type="text" id="searchUser" placeholder= "Search by Name or Username...." aria-label="Search">
                    <span class="input-group-append" id="searchBtn">
                     <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
                    </span>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-5">
                     <select multiple class="form-control" id="exampleFormControlSelect2">
                        <option>1</option>
                    </select>
                 </div>
            </div>
        </div>
       </form>
</div>

Answer 5

Answer №3

By utilizing Javascript, you have the ability to create a dynamic auto-complete feature. The process involves creating a div with an input field and a list of possible matches. Upon typing in the input field, the script compares the input value with the list items and displays matching options. Clicking on a match will populate the input field with the selected value. This implementation can also be achieved using vanilla javascript with Bootstrap. While this code serves its purpose based on existing knowledge, there are certainly areas for improvement.

// Capture input element

let input = document.querySelector("#userName");

let allListItems = document.querySelectorAll(".lists");

input.addEventListener("keyup", checkMatch);

function checkMatch(){
   
   if (input.value !== ``) {
      // Iterate through each list item
        allListItems.forEach(function(value){
            if (value.innerHTML.toLowerCase().includes(`${input.value.toLowerCase()}`)) {
                value.classList.add("showMe")
                value.addEventListener("click", complete);

                function complete(){
                    input.value = value.innerHTML;
                   allListItems.forEach(function(value){
                       value.classList.remove("showMe");
                   })
                }
            }else{
                value.classList.remove("showMe");
            }
        })

   };

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.box-container{
    width: 400px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
#userName{
    width: 100%;
    height: 45px;
    background-color: transparent;
    border: 0.5px solid #212121;
    font-family: "Open Sans";
    font-size: 18px;
    padding: 0px 10px;
    border-radius: 2px;
}
.box-container ul{
    width: 100%;
    height: auto;
    list-style-type: none;
}
.lists{
    width: 100%;
    height: 45px;
    padding: 0px 10px;
    text-align: left;
    line-height: 45px;
    color: #000;
    font-size: 18px;
    font-family: "Open Sans";
    display: none;
    border: 2px solid #000;
    cursor: pointer;
}
.showMe{
    display: block;
}
p{
    margin-top: 50px;
    text-align: center;
    font-size: 18px;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AutoComplete</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box-container">
        <input type="text" id="userName" placeholder="Enter username here">
        <ul>
            <li class="lists">Alex</li>
            <li class="lists">Mox</li>
            <li class="lists">Karl</li>
            <li class="lists">NightRider</li>
            <li class="lists">Yk</li>
            <li class="lists">heroX</li>
            <li class="lists">ari</li>
            <li class="lists">hant</li>
            <li class="lists">tin</li>
        </ul>
    </div>

    <p>Try Alex , Mox , Karl</p>

    <script src="main.js"></script>
</body>
</html>

Answer 6

By utilizing Javascript, you have the ability to create a dynamic auto-complete feature. The process involves creating a div with an input field and a list of possible matches. Upon typing in the input field, the script compares the input value with the list items and displays matching options. Clicking on a match will populate the input field with the selected value. This implementation can also be achieved using vanilla javascript with Bootstrap. While this code serves its purpose based on existing knowledge, there are certainly areas for improvement.

// Capture input element

let input = document.querySelector("#userName");

let allListItems = document.querySelectorAll(".lists");

input.addEventListener("keyup", checkMatch);

function checkMatch(){
   
   if (input.value !== ``) {
      // Iterate through each list item
        allListItems.forEach(function(value){
            if (value.innerHTML.toLowerCase().includes(`${input.value.toLowerCase()}`)) {
                value.classList.add("showMe")
                value.addEventListener("click", complete);

                function complete(){
                    input.value = value.innerHTML;
                   allListItems.forEach(function(value){
                       value.classList.remove("showMe");
                   })
                }
            }else{
                value.classList.remove("showMe");
            }
        })

   };

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.box-container{
    width: 400px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
#userName{
    width: 100%;
    height: 45px;
    background-color: transparent;
    border: 0.5px solid #212121;
    font-family: "Open Sans";
    font-size: 18px;
    padding: 0px 10px;
    border-radius: 2px;
}
.box-container ul{
    width: 100%;
    height: auto;
    list-style-type: none;
}
.lists{
    width: 100%;
    height: 45px;
    padding: 0px 10px;
    text-align: left;
    line-height: 45px;
    color: #000;
    font-size: 18px;
    font-family: "Open Sans";
    display: none;
    border: 2px solid #000;
    cursor: pointer;
}
.showMe{
    display: block;
}
p{
    margin-top: 50px;
    text-align: center;
    font-size: 18px;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AutoComplete</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box-container">
        <input type="text" id="userName" placeholder="Enter username here">
        <ul>
            <li class="lists">Alex</li>
            <li class="lists">Mox</li>
            <li class="lists">Karl</li>
            <li class="lists">NightRider</li>
            <li class="lists">Yk</li>
            <li class="lists">heroX</li>
            <li class="lists">ari</li>
            <li class="lists">hant</li>
            <li class="lists">tin</li>
        </ul>
    </div>

    <p>Try Alex , Mox , Karl</p>

    <script src="main.js"></script>
</body>
</html>

placing a dropdown menu below the search bar

Answer №1

Answer №2

Answer №3

Similar questions

When encountering a 404 redirect, CSS and JS files may fail to display

Use the controller to set the body's background image

Unlocking the Power of jQuery's toggle Method for Dynamic Functionality

Unusual gaps of white space appearing between React components

HTML file unable to connect with CSS stylesheet

pressure exerted on the body

Can I programmatically retrieve a comprehensive list of all global HTML attributes available?

The rendering of HTML DOM is being obstructed on iPhone devices running iOS 13

Retrieve data from an online JSON file

In order to decrease the dimensions of the calendar

Having trouble aligning a div vertically inside another div?

Resetting the value of a radio button input option to null using Angular2 ngModel

Inconsistent functionality of HTML5 BrightCove videos on Android devices

How to easily incorporate images after text in Bootstrap 4 beta

Maintain the style of the main navigation menu when hovering over the sub-navigation items

What is the best way to use Javascript in order to automatically open a designated tab within SharePoint 2013?

How to incorporate Bootstrap carousel into WordPress without relying on a plugin?

IIFE and the Twitter share button are a powerful duo

Using jQuery to close a DIV with a delay

Customizing Bootstrap tooltip appearances with CSS