1. 首页
  2. 问题列表
  3. 如何使搜索中的选项始终可见
提问者：小点点

如何使搜索中的选项始终可见


我用html，css和javascript制作了一个搜索栏，它工作得很完美，但我希望答案在用户开始键入时显示，而不是之前。 我还想在其中添加一个选项，它总是显示，无论它是否匹配结果。

null

/* 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++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
.div {
  display: none;
}

.dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

#myInput {
  box-sizing: border-box;
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border: 5px solid #ddd;
}

#myInput:focus {
  outline: 7px solid #ddd;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  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;
}
<div class="dropdown">
  <input type="text" onclick="myFunction()" class="dropbtn" placeholder="Search Here..." 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>
    <a href="#tools">Cyber Warriors YouTube Channel</a>
  </div>
</div>

null


共2个答案

匿名用户

从input中删除onclick，并在您想要修复的值上添加一个类“fixed-input

null

/* When the user clicks on the button, toggle between hiding and showing the dropdown content */

function hideOptions() {
  document.getElementById("myDropdown").classList.remove("show");
}

function showOptions() {
  hideOptions();
  document.getElementById("myDropdown").classList.add("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  if( input.value === ''){
      hideOptions();
      return false;
  }
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else if(a[i].classList.contains('fixed-input') === true) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
  showOptions();
}
.div {
  display: none;
}

.dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

#myInput {
  box-sizing: border-box;
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border: 5px solid #ddd;
}

#myInput:focus {
  outline: 7px solid #ddd;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  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;
}
<div class="dropdown">
  <input type="text" class="dropbtn" placeholder="Search Here..." 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" class="fixed-input">Support</a>
    <a href="#tools">Tools</a>
    <a href="#tools">Cyber Warriors YouTube Channel</a>
  </div>
</div>

匿名用户 

Please try to remove onclick event and code to show dropdown inside onkeyup event.
For better understanding see the attached code snippet.

null

function filterFunction() {
let isInputAvail = false;
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toLowerCase();
  if (filter.length > 0) {
   document.getElementById("myDropdown").classList.add("show");
  } else {
  
document.getElementById("myDropdown").classList.remove("show");
  }
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].innerText;
    if (txtValue.toLowerCase().indexOf(filter) > -1) {
    isInputAvail = true;
      a[i].style.display = "block";
    } else {
      a[i].style.display = "none";
    }
  }
  if (!isInputAvail) { document.getElementById("noMatches").classList.add('show');
  } else {
    document.getElementById("noMatches").classList.remove('show');
  }
 
}
.div {
  display: none;    
} 
.dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
#myInput {
  box-sizing: border-box;
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border: 5px solid #ddd;
}
#myInput:focus {    
outline: 7px solid #ddd;
}
.dropdown{
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  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;
}
<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="dropdown">
      <input type="text" class="dropbtn"  placeholder="Search Here..." id="myInput" onInput="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>
        <a href="#tools">Cyber Warriors YouTube Channel</a>
      </div>
      <div id="noMatches" class="dropdown-content">
        <a href="#tools">No Matches</a>
      </div>
    </div>
  </body>
</html>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS