为下拉菜单添加带搜索栏的滚动条

huangapple
go评论103阅读模式
英文:

Add a scroll bar for dropdown menu with search bar

问题

这是我的HTML代码：

  1. <div class="location-dropdown dropdown">
  2.     <button onclick="locations_dropdown()" class="dropbtn" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">{{site_network_status['sitename']}}</button>
  3.     <div id="myDropdown" class="dropdown-content">
  4.         <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
  5.         <div>
  6.             <a class="dropdown-item" href="link1">link1</a>
  7.             <a class="dropdown-item" href="link2">link2</a>
  8.         </div>
  9.     </div>
  10. </div>

这是用于显示所有选项并允许用户搜索的JavaScript代码：

  1. function locations_dropdown() {
  2.     document.getElementById("myDropdown").classList.toggle("show");
  3. }
  5. function filterFunction() {
  6.     var input, filter, ul, li, a, i;
  7.     input = document.getElementById("myInput");
  8.     filter = input.value.toUpperCase();
  9.     div = document.getElementById("myDropdown");
  10.     a = div.getElementsByTagName("a");
  11.     for (i = 0; i < a.length; i++) {
  12.         txtValue = a[i].textContent || a[i].innerText;
  13.         if (txtValue.toUpperCase().indexOf(filter) > -1) {
  14.             a[i].style.display = "";
  15.         } else {
  16.             a[i].style.display = "none";
  17.         }
  18.     }
  19. }

这段代码可以正常工作。但是在下拉菜单中有太多选项链接。所以我想要一个选项，可以滚动查看这些选项。我只想显示大约10个选项，然后从中滚动。

任何帮助将不胜感激。

更新

这是我正在使用的CSS文件：

  1. .dropbtn {
  2.     background-color: #04AA6D;
  3.     color: white;
  4.     padding: 16px;
  5.     font-size: 16px;
  6.     border: none;
  7.     cursor: pointer;
  8. }
  10. .dropbtn:hover, .dropbtn:focus {
  11.     background-color: #3e8e41;
  12. }
  14. #myInput {
  15.     box-sizing: border-box;
  16.     background-image: url('searchicon.png');
  17.     background-position: 14px 12px;
  18.     background-repeat: no-repeat;
  19.     font-size: 16px;
  20.     padding: 14px 20px 12px 45px;
  21.     border: none;
  22.     border-bottom: 1px solid #ddd;
  23. }
  25. #myInput:focus {outline: 3px solid #ddd;}
  27. .dropdown {
  28.     position: relative;
  29.     display: inline-block;
  30. }
  32. .dropdown-content {
  33.     display: none;
  34.     position: absolute;
  35.     background-color: #f6f6f6;
  36.     min-width: 230px;
  37.     overflow: auto;
  38.     border: 1px solid #ddd;
  39.     z-index: 1;
  40. }
  42. .dropdown-content a {
  43.     color: black;
  44.     padding: 12px 16px;
  45.     text-decoration: none;
  46.     display: block;
  47. }
  49. .dropdown a:hover {background-color: #ddd;}
  51. .show {display: block;}
英文:

This is my HTML code

  1.                 &lt;div class=&quot;location-dropdown dropdown&quot;&gt;
  2.                     &lt;button onclick=&quot;locations_dropdown()&quot; class=&quot;dropbtn&quot; id=&quot;dropdownMenuLink&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;{{site_network_status[&#39;sitename&#39;]}}&lt;/button&gt;
  3.                     &lt;div id=&quot;myDropdown&quot; class=&quot;dropdown-content&quot;&gt;
  4.                         &lt;input type=&quot;text&quot; placeholder=&quot;Search..&quot; id=&quot;myInput&quot; onkeyup=&quot;filterFunction()&quot;&gt;
  5.                         &lt;div&gt;
  6.                             &lt;a class=&quot;dropdown-item&quot; href=&quot;link1&quot;&gt;link1&lt;/a&gt;
  7.                             &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link2&lt;/a&gt;
  8.                         &lt;/div&gt;
  9.                     &lt;/div&gt;
  10.                 &lt;/div&gt;

And this is my js code used to show all the options and let user search.

  1. function locations_dropdown() {
  2.     document.getElementById(&quot;myDropdown&quot;).classList.toggle(&quot;show&quot;);
  3.   }
  4.   
  5.   function filterFunction() {
  6.     var input, filter, ul, li, a, i;
  7.     input = document.getElementById(&quot;myInput&quot;);
  8.     filter = input.value.toUpperCase();
  9.     div = document.getElementById(&quot;myDropdown&quot;);
  10.     a = div.getElementsByTagName(&quot;a&quot;);
  11.     for (i = 0; i &lt; a.length; i++) {
  12.       txtValue = a[i].textContent || a[i].innerText;
  13.       if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
  14.         a[i].style.display = &quot;&quot;;
  15.       } else {
  16.         a[i].style.display = &quot;none&quot;;
  17.       }
  18.     }
  19.   }

this works fine. But I have way too many option links in the dropdown menu. So i want an option to be able to scroll through those options. i only want to be able to show around 10 options and scroll from that down.

Any help will be appreciated.

Update

this is the css file i am using.

  1. .dropbtn {
  2.     background-color: #04AA6D;
  3.     color: white;
  4.     padding: 16px;
  5.     font-size: 16px;
  6.     border: none;
  7.     cursor: pointer;
  8.   }
  9.   
  10.   .dropbtn:hover, .dropbtn:focus {
  11.     background-color: #3e8e41;
  12.   }
  13.   
  14.   #myInput {
  15.     box-sizing: border-box;
  16.     background-image: url(&#39;searchicon.png&#39;);
  17.     background-position: 14px 12px;
  18.     background-repeat: no-repeat;
  19.     font-size: 16px;
  20.     padding: 14px 20px 12px 45px;
  21.     border: none;
  22.     border-bottom: 1px solid #ddd;
  23.   }
  24.   
  25.   #myInput:focus {outline: 3px solid #ddd;}
  26.   
  27.   .dropdown {
  28.     position: relative;
  29.     display: inline-block;
  30.   }
  31.   
  32.   .dropdown-content {
  33.     display: none;
  34.     position: absolute;
  35.     background-color: #f6f6f6;
  36.     min-width: 230px;
  37.     overflow: auto;
  38.     border: 1px solid #ddd;
  39.     z-index: 1;
  40.   }
  41.   
  42.   .dropdown-content a {
  43.     color: black;
  44.     padding: 12px 16px;
  45.     text-decoration: none;
  46.     display: block;
  47.   }
  48.   
  49.   .dropdown a:hover {background-color: #ddd;}
  50.   
  51.   .show {display: block;}

答案1

得分: 2

添加可滚动容器类并进行样式设置。

  1. .scrolable-container {
  2.   overflow: auto;
  3.   max-height: 420px;
  4. }

在HTML代码中，将这个类应用于需要可滚动容器的元素。

英文:

add scrolable-container class and style it.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

  1. h1,
  2. h2 {
  3.   font-family: Lato;
  4. }
  6. .dropbtn {
  7.   background-color: #04aa6d;
  8.   color: white;
  9.   padding: 16px;
  10.   font-size: 16px;
  11.   border: none;
  12.   cursor: pointer;
  13. }
  15. .dropbtn:hover,
  16. .dropbtn:focus {
  17.   background-color: #3e8e41;
  18. }
  20. #myInput {
  21.   box-sizing: border-box;
  22.   background-image: url(&#39;searchicon.png&#39;);
  23.   background-position: 14px 12px;
  24.   background-repeat: no-repeat;
  25.   font-size: 16px;
  26.   padding: 14px 20px 12px 45px;
  27.   border: none;
  28.   border-bottom: 1px solid #ddd;
  29. }
  31. #myInput:focus {
  32.   outline: 3px solid #ddd;
  33. }
  35. .dropdown {
  36.   position: relative;
  37.   display: inline-block;
  38. }
  40. .dropdown-content {
  41.   display: none;
  42.   position: absolute;
  43.   background-color: #f6f6f6;
  44.   min-width: 230px;
  45.   overflow: auto;
  46.   border: 1px solid #ddd;
  47.   z-index: 1;
  48. }
  50. .dropdown-content a {
  51.   color: black;
  52.   padding: 12px 16px;
  53.   text-decoration: none;
  54.   display: block;
  55. }
  57. .dropdown a:hover {
  58.   background-color: #ddd;
  59. }
  61. .show {
  62.   display: block;
  63. }
  65. .scrolable-container {
  66.   overflow: auto;
  67.   max-height: 420px;
  68. }

<!-- language: lang-html -->

  1. &lt;body&gt;
  2. &lt;div class=&quot;location-dropdown dropdown&quot;&gt;
  3. &lt;button onclick=&quot;locations_dropdown()&quot; class=&quot;dropbtn&quot; id=&quot;dropdownMenuLink&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;{{site_network_status[&#39;sitename&#39;]}}&lt;/button&gt;
  4. &lt;div id=&quot;myDropdown&quot; class=&quot;dropdown-content&quot;&gt;
  5.     &lt;input type=&quot;text&quot; placeholder=&quot;Search..&quot; id=&quot;myInput&quot; onkeyup=&quot;filterFunction()&quot;&gt;
  6.     &lt;div class=&quot;scrolable-container&quot;&gt;
  7.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link1&quot;&gt;link1&lt;/a&gt;
  8.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link2&lt;/a&gt;
  9.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link3&lt;/a&gt;
  10.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link4&lt;/a&gt;
  11.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link5&lt;/a&gt;
  12.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link6&lt;/a&gt;
  13.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link7&lt;/a&gt;
  14.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link8&lt;/a&gt;
  15.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link9&lt;/a&gt;
  16.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link10&lt;/a&gt;
  17.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link11&lt;/a&gt;
  18.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link12&lt;/a&gt;
  19.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link13&lt;/a&gt;
  20.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link14&lt;/a&gt;
  21.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link15&lt;/a&gt;
  22.         &lt;a class=&quot;dropdown-item&quot; href=&quot;link2&quot;&gt;link16&lt;/a&gt;
  23.     &lt;/div&gt;
  24. &lt;/div&gt;
  25. &lt;/div&gt;
  26. &lt;script&gt;
  27.   function locations_dropdown() {
  28.     document.getElementById(&quot;myDropdown&quot;).classList.toggle(&quot;show&quot;);
  29.   }
  30.   
  31.   function filterFunction() {
  32.     var input, filter, ul, li, a, i;
  33.     input = document.getElementById(&quot;myInput&quot;);
  34.     filter = input.value.toUpperCase();
  35.     div = document.getElementById(&quot;myDropdown&quot;);
  36.     a = div.getElementsByTagName(&quot;a&quot;);
  37.     for (i = 0; i &lt; a.length; i++) {
  38.       txtValue = a[i].textContent || a[i].innerText;
  39.       if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
  40.         a[i].style.display = &quot;&quot;;
  41.       } else {
  42.         a[i].style.display = &quot;none&quot;;
  43.       }
  44.     }
  45.   }
  46. &lt;/script&gt;
  47. &lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月9日 15:09:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/75054085.html
  • dropdown
  • html
  • javascript
  • scrollbar
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定