(नीचे दिए गए कोड को देखें।)

मैं खोज में टाइप करने से पहले मेनू विकल्प छिपाना चाहूंगा।

मैं आदर्श रूप से परिणाम प्रदर्शित करने से पहले 2 या 3 वर्ण मिलान की आवश्यकता करना चाहता हूं।

छिपाने की प्राथमिकता है।

मैंने संख्यात्मक मानों और प्रदर्शन विशेषता को बदलने का प्रयास किया है। प्रारंभिक सीएसएस ओवरराइड करता है, क्योंकि मुझे यकीन है कि मानक व्यवहार है।

   
    function myFunction() {
      // Declare variables
      var input, filter, ul, li, a, i;
      input = document.getElementById("mySearch");
      filter = input.value.toUpperCase();
      ul = document.getElementById("myMenu");
      li = ul.getElementsByTagName("li");
    
      // Loop through all list items, and hide those who don't match the search query
      for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }
   
    /* Style the search box */
    #mySearch {
      width: 100%;
      font-size: 18px;
      padding: 11px;
      border: 1px solid #ddd;
    }
    
    /* Style the navigation menu */
    #myMenu {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    /* Style the navigation links */
    #myMenu li a {
      padding: 12px;
      text-decoration: none;
      color: black;
      display: block
    }
    
    #myMenu li a:hover {
      background-color: #eee;
    }
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    
    <ul id="myMenu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">SQL</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Node.js</a></li>
    </ul>
1
user304626 25 नवम्बर 2020, 03:20

1 उत्तर

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

इससे आप कार्य शुरू कर पाएंगे। यदि आपको और अधिक मदद की ज़रूरत है तो मुझे बताएं

function myFunction() {
      // Declare variables
      var input, filter, ul, li, a, i;
      input = document.getElementById("mySearch");
      
      var sbv = input.value
      
      filter = input.value.toUpperCase();
      ul = document.getElementById("myMenu");
      
      if (sbv.length > 2){
         ul.style.display = "block"
      }else{
         ul.style.display = "none"
      }
      
      li = ul.getElementsByTagName("li");
    
      // Loop through all list items, and hide those who don't match the search query
      for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }
/* Style the search box */
    #mySearch {
      width: 100%;
      font-size: 18px;
      padding: 11px;
      border: 1px solid #ddd;
      
    }
    
    /* Style the navigation menu */
    #myMenu {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display:none;
    }
    
    /* Style the navigation links */
    #myMenu li a {
      padding: 12px;
      text-decoration: none;
      color: black;
      display: block
    }
    
    #myMenu li a:hover {
      background-color: #eee;
    }
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    
    <ul id="myMenu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">SQL</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Node.js</a></li>
    </ul>
1
DCR 25 नवम्बर 2020, 00:49