How TO - Search Menu







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



How TO - Search Menu



❮ Previous
Next ❯



Learn how to create a search menu to filter links with JavaScript.




Search/Filter Menu


How to search for links in a navigation menu:





Menu



  • HTML

  • CSS

  • JavaScript

  • PHP

  • Python

  • jQuery

  • SQL

  • Bootstrap

  • Node.js





Page Content


Start to type for a specific category inside the search bar to "filter" the search options.


Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..


Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..


Some text..





function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
for (i = 0; i
  • -1) {
    li[i].style.display = "";
    } else {
    li[i].style.display = "none";
    }
    }
    }

    Try it Yourself »




    Create A Search Menu


    Step 1) Add HTML:


    Example



    <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>


    Note: We use href="#" in this demo since we do not have a
    page to link it to. In real life this should be a real URL to a specific page.




    Step 2) Add CSS:

    Style the search box and the navigation menu:



    Example



    /* 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 {
      backgrxound-color: #f6f6f6;
      padding: 12px;
     
    text-decoration: none;
      font-size: 18px;
      color: black;
     
    display: block
    }

    #myMenu li a:hover {
     
    background-color: #eee;
    }









    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });






    Step 3) Add JavaScript:



    Example



    <script>
    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";
           
    }
        }
    }
    </script>

    Try it Yourself »


    Tip: Remove toUpperCase() if you want to perform a case-sensitive search.




    Tip: Also check out How To Filter Tables.


    Tip: Also check out How To Filter Lists.





    ❮ Previous
    Next ❯

  • Popular posts from this blog

    How to check contact read email or not when send email to Individual?

    Displaying single band from multi-band raster using QGIS

    How many registers does an x86_64 CPU actually have?