在可搜索的下拉列表中添加滚动条和向下箭头答案

【问题标题】：Add a scrollbar and down arrow in the searchable dropdown list在可搜索的下拉列表中添加滚动条和向下箭头
【发布时间】：2020-10-12 08:08:18
【问题描述】：

我正在研究一个可搜索的下拉菜单，这是我的代码：

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>

这很好用。我只需要在列表打开时添加一个滚动条和一个向下箭头。我需要这样的。

任何帮助或建议将不胜感激。

【问题讨论】：

你有 CSS 吗？
@evolutionxbox 是的，我已在问题中附加了 CSS
确实不需要链接到 Fiddle，只需在编辑帖子时将代码放入 Stack Snippet（<> 按钮）即可。
谢谢@ScottMarcus，下次我会这样做

标签： javascript css css-selectors dropdown html-select

【解决方案1】：

我认为这个问题与 javascript 无关。您需要做的是将固定的max-height CSS 属性设置为#myDropdown 元素，当渲染过多元素时会导致溢出。正如您拥有overflow: auto 一样，它将提示该div 中的滚动条。如何修改它？也可以使用 CSS，您可以查看 here 和 here 的方式

【讨论】：

滚动条已经有向下和向上箭头图标，因此您还需要通过 css 修改这些图标

【解决方案2】：

如果下拉菜单的高度小于所有可用选项的高度，则会自动生成一个下拉菜单。这是所需的 CSS，下面包含一个 sn-p，因此您可以看到它的样子。

/* 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>

【讨论】：

谢谢，如何在列表打开时添加向下箭头图标？
浏览器应该自动处理。您想要自己的图标是否有特定原因？
我需要与 HTM5 数据列表非常相似的图标（向下箭头）
另一件事是我需要在搜索输入后启动下拉菜单。否则当我向下滚动时会错过搜索输入
@OwaisAhmed 我认为这里有一些类似的替代方案可能有用：stackoverflow.com/questions/18796221/…