Add a scrollbar and down arrow in the searchable dropdown list

Question

I am working on a searchable dropdown and here is my code:

function openSearchDropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function closeSearchDropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function selectFilteredValue() {
    document.getElementById("search_input").value = event.target.getAttribute("data-value");
    closeSearchDropdown();
}

function filterSearchDropdown() {
    var input, filter, ul, li, span, i;
    input = document.getElementById("search_value");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    span = div.getElementsByTagName("span");
    for (i = 0; i < span.length; i++) {
        txtValue = span[i].textContent || span[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            span[i].style.display = "";
        } else {
            span[i].style.display = "none";
        }
    }
}

.dropdown .search-area {
    box-sizing: border-box;
    background-image: url("searchicon.png");
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding-top:5px;
    border: none;
    border-bottom: 1px solid #ddd;
}

.dropdown .search-area:focus {
    outline: 3px solid #ddd;
}

.dropdown {
    position: relative;
    display: inline-block;
    left:35px;
}

.dropdown-content {
    display: none;
    position: absolute;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
}

.dropdown-content span {
    color: black;
    padding-top:5px;
    text-decoration: none;
    display: block;
}

.dropdown span:hover {
    background-color: #ddd;
}

.show {
    display: block;
}
input#search_input {
    min-width: 191px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>

        <div class="dropdown">
            <input onclick="openSearchDropdown()" id="search_input" />
            <div id="myDropdown" class="dropdown-content">
                <input type="text" placeholder="Search.." id="search_value" onkeyup="filterSearchDropdown()" class="search-area" />
                <span data-value="Bangkok" onclick="selectFilteredValue()">Bangkok</span>
                <span data-value="Hong_Kong" onclick="selectFilteredValue()">Hong_Kong</span>
                <span data-value="Jakarta" onclick="selectFilteredValue()">Jakarta</span>
                <span data-value="Delhi" onclick="selectFilteredValue()">Delhi</span>
                <span data-value="Karachi" onclick="selectFilteredValue()">Karachi</span>
                <span data-value="Sydney" onclick="selectFilteredValue()">Sydney</span>
            </div>
        </div>
    </body>
</html>

This works fine. I just need to add a scrollbar and a down arrow when the list is open. I need like this.

Any help or suggestion would be appreciated.

There's really no need to link to a Fiddle, just put your code into a Stack Snippet (the `<>` button) when you are editing your post. — Scott Marcus, Oct 12 '20 at 00:08

Alvie Mahmud · Answer 1 · 2020-10-12T00:08:18.263

There will automatically be a dropdown if the height of the drop down is less than the height of all of the options available. This is the CSS required, there is a snippet included below so you can see what it looks like.

/* change 5 to the number of items you want to show at start of dropdown */
 /* 1em = font height, 8px from outline + padding*/
 /* max-height and not height for when search has less results */
 
#myDropdown {
  max-height: calc(4 * (1em + 8px));
}

/* rest of your css */

function openSearchDropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function closeSearchDropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function selectFilteredValue() {
    document.getElementById("search_input").value = event.target.getAttribute("data-value");
    closeSearchDropdown();
}

function filterSearchDropdown() {
    var input, filter, ul, li, span, i;
    input = document.getElementById("search_value");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    span = div.getElementsByTagName("span");
    for (i = 0; i < span.length; i++) {
        txtValue = span[i].textContent || span[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            span[i].style.display = "";
        } else {
            span[i].style.display = "none";
        }
    }
}

/* change 5 to the number of items you want to show at start of dropdown */
 /* 1em = font height, 8px from outline + padding*/
 /* max-height and not height for when search has less results */
 
#myDropdown {
  max-height: calc(4 * (1em + 8px));
}

/* rest of your css */

.dropdown .search-area {
    box-sizing: border-box;
    background-image: url("searchicon.png");
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding-top:5px;
    border: none;
    border-bottom: 1px solid #ddd;
}

.dropdown .search-area:focus {
    outline: 3px solid #ddd;
}

.dropdown {
    position: relative;
    display: inline-block;
    left:35px;
}

.dropdown-content {
    display: none;
    position: absolute;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
}

.dropdown-content span {
    color: black;
    padding-top:5px;
    text-decoration: none;
    display: block;
}

.dropdown span:hover {
    background-color: #ddd;
}

.show {
    display: block;
}
input#search_input {
    min-width: 191px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>

        <div class="dropdown">
            <input onclick="openSearchDropdown()" id="search_input" />
            <div id="myDropdown" class="dropdown-content">
                <input type="text" placeholder="Search.." id="search_value" onkeyup="filterSearchDropdown()" class="search-area" />
                <span data-value="Bangkok" onclick="selectFilteredValue()">Bangkok</span>
                <span data-value="Hong_Kong" onclick="selectFilteredValue()">Hong_Kong</span>
                <span data-value="Jakarta" onclick="selectFilteredValue()">Jakarta</span>
                <span data-value="Delhi" onclick="selectFilteredValue()">Delhi</span>
                <span data-value="Karachi" onclick="selectFilteredValue()">Karachi</span>
                <span data-value="Sydney" onclick="selectFilteredValue()">Sydney</span>
            </div>
        </div>
    </body>
</html>

thanks and how to add the down arrow icon when the list is open? — Owais Ahmed, Oct 12 '20 at 00:07
The browser should handle that automatically. Is there a specific reason you want your own icon instead? — Alvie Mahmud, Oct 12 '20 at 00:09
I need the icon very similar to the HTM5 datalist ( down arrow ) — Owais Ahmed, Oct 12 '20 at 00:13
The other thing is i need the dropdown to start after the search input. Otherwise the search input will be missed when I scroll down — Owais Ahmed, Oct 12 '20 at 00:15
@OwaisAhmed I think there are some similar alternatives here that maybe useful: https://stackoverflow.com/questions/18796221/creating-a-select-box-with-a-search-option/57809086#57809086 — Alvie Mahmud, Oct 18 '20 at 13:25

score 0 · Answer 2 · answered Oct 12 '20 at 00:05

0

I think this question is not related to javascript. What you need to do is to set a fixed max-height CSS property to #myDropdown element and that will cause an overflow when excessive number of elements are rendered. And as you have overflow: auto, it will prompt the scrollbar in that div. How to modify it? With CSS too, you can look how here and here

answered Oct 12 '20 at 00:05

Agustin Moles

1,364
7
15

Scrollbars already have down and up arrow icons so you also need to modify those via css – Agustin Moles Oct 12 '20 at 00:33

Add a scrollbar and down arrow in the searchable dropdown list

2 Answers2