THE WORLD'S LARGEST WEB DEVELOPER SITE
×

HOW TO

HowTo Home

Menus

Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Top Navigation Responsive Topnav Side Navigation Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Fixed Menu Slide Down Bar on Scroll Sticky Navbar Hover Dropdowns Click Dropdowns Dropdown in Navbar Mega Menu Pagination Breadcrumbs Button Group Vertical Button Group

Images

Slideshow Modal Images Lightbox Responsive Image Grid Image Grid Image Overlay Image Effects Image Text Full Page Image Hero Image Rounded Images Meet the Team Flip an Image Shake an Image Portfolio Gallery Portfolio with Filtering

Buttons

Alert Buttons Animated Buttons Social Media Buttons Loading Buttons Next/prev Buttons Round Buttons Scroll To Top Button

Forms

Login Form Signup Form Contact Form Responsive Form Clear Input Field Copy Text to Clipboard Animated Search Custom Checkbox/Radio Toggle Switch Password Validation Toggle Password Visibility Multiple Step Form

Filters

Filter List Filter Table Filter Elements Sort List Sort Table

More

Modal Boxes Timeline Progress Bars Skill Bar Range Sliders Tooltips Popups Calendar Responsive Tables HTML Includes To Do List Loaders Star Rating User Rating Overlay Effect Contact Chips Cards Profile Card Alerts Notes Labels Circles Coupon Fixed Footer Equal Height Clearfix Snackbar Scroll Drawing Pricing Table Parallax Aspect Ratio Build a Web Site Toggle Like/Dislike Toggle Hide/Show Toggle Class Add Class Remove Class Arrows Shapes Vertical Line Animate Icons Countdown Timer Typewriter Coming Soon Page Center Website Thumbnails Chat Messages Testimonials Draggable HTML Element Syntax Highlighter JS Animations

Grid

2 Column Layout 3 Column Layout 4 Column Layout Mixed Column Layout

Google

Google Maps Google Translate Google Charts Google Fonts

Converters

Convert Weight Convert Temperature Convert Length Convert Speed

How TO - Filter/Search List


Learn how to create a filter list with JavaScript.


Filter List

How to use JavaScript to search for items in a list.


Create A Search List

Step 1) Add HTML:

Example

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</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 input element and the list:

Example

#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#myUL li a {
    border: 1px solid #ddd; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove default text underline */
    font-size: 18px; /* Increase the font-size */
    color: black; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
}

Step 3) Add JavaScript:

Example

<script>
function myFunction() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    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 Filter Table.

Tip: You can also use our JavaScript library to filter elements: W3.JS.