मैंने एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करके एक खोज बार बनाया है और यह पूरी तरह से काम कर रहा है लेकिन मैं चाहता हूं कि जब उपयोगकर्ता टाइप करना शुरू करे तो उत्तर दिखाए जाएं, पहले नहीं। और मैं इसमें एक विकल्प भी जोड़ना चाहता हूं जो हमेशा दिखाया जाता है कि यह परिणाम से मेल खाता है या नहीं।

/* 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>
3
Harshit mishra 26 जुलाई 2020, 15:30

2 जवाब

सबसे बढ़िया उत्तर

इनपुट से ऑनक्लिक हटाएं और उस मूल्य पर "फिक्स्ड-इनपुट" वर्ग जोड़ें जिसे आप तय करना चाहते थे

/* 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>
2
Rahul juneja - DevOps 26 जुलाई 2020, 16:24
Please try to remove onclick event and code to show dropdown inside onkeyup event.
For better understanding see the attached code snippet.
function filterFunction() {
  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 || txtValue.toLowerCase() === 'more') {
      a[i].style.display = "block";
    } 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;
}
<!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>
        <a href="#tools">More</a>
      </div>
    </div>
  </body>
</html>
3
Ritu 27 जुलाई 2020, 11:44