Question

我创建了一个下拉列表，它有超过25个链接下拉列表显示，所以我需要在dopdown列表中只显示3个（不禁用其他列表），并对所有人执行搜索选项。请帮我找一个解决方案

 <div class="dropdown">
<input onclick="myFunction()" class="dropbtn" id="myInput" 
   onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>

</div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "";
    } else {
        a[i].style.display = "none";
    }
    }
     }
   </script>

css文件

     .dropbtn {
        background-color:#E8E0DE;
        color: white;
        padding: 6px;
        font-size: 16px;
        border: none;
        cursor: pointer;
         }

    .dropbtn:hover, .dropbtn:focus {
     background-color:#FAF6F5;
      }
     #myInput {
      border-box: box-sizing;
      position:relative;
      top: 10px;
      color:black;
      background-position: 1px 2px;
      background-repeat: no-repeat;
      font-size: 16px;
      padding: 5px 350px 10px 15px;
      border: none;
      }

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

    .dropdown-content {
     display: none;
      position: absolute;
     background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
     }

 .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  }

.dropdown a:hover {background-color: #ddd}

 .show {display:block;}


</style>

Answer 1

您最多只想返回3个您想要添加类似于您的过滤器功能的功能，但在找到3个显示样式设置为“”的项目后，将其余设置为“无”

function limitVisibility() {
let div, a, i;
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
    let counter = 0;
    if (counter < 3 && a[i].style.display === "" ) {
        counter += 1;
    } else {
        a[i].style.display = "none";
    }
  }
}

并将其包含在onClick和onkeyup中：

Answer 2

试试这个：

function filterFunction() {
var input, value, filter, ul, li, a, i, limit, init;
input = document.getElementById("myInput");
value = document.getElementById("myInput").value; // ADD INPUT VALUE
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
init = 0;
limit = 3;    
for (i = 0; i < a.length; i++) {

    if( (a[i].innerHTML.toUpperCase().indexOf(filter) > -1)  ) {
        if (init < limit) // LIMIT to FIRST 3 results
          { 
            a[i].style.display = "";
          }
        else if(value =='') // Case when Input is Empty
         { 
            a[i].style.display = "";
         }
       else
         {
             a[i].style.display = "none";
         }
        init++; // counting results 

    }
   else 
   {
        a[i].style.display = "none";
   }
}

}

限制html中的下拉链接显示

2 个答案: