[英]Add a scrollbar and down arrow in the searchable dropdown list
我正在研究一個可搜索的下拉菜單，這是我的代碼：
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，下面包含一個片段，因此您可以看到它的樣子。
/* 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>
Autocomplete js - 列表滾動條的列表向下箭頭閃爍
[英]Autocomplete js - The list's scrollbar's list down arrow flickers
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.