Howto

How To Create Filter List Using Javascript, Html, And Css

How To Create Filter List Using Javascript, Html, And Css

A filter list is a form of route policy that restricts the routes that will be advertised or accepted based on the AS-Path of the route. To configure a filter list, you must first create an AS-path access list based on the known paths you wish to permit.

Step 1 Add HTML:

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

<ul id=”myUL”>

<li><a href=”#” class=”header”>A</a></li>

<li><a href=”#”>Adele</a></li>

<li><a href=”#”>Agnes</a></li>

<li><a href=”#” class=”header”>B</a></li>

<li><a href=”#”>Billy</a></li>

<li><a href=”#”>Bob</a></li>

<li><a href=”#” class=”header”>C</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:

#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.header {

background-color: #e2e2e2; /* Add a darker background color for headers */

cursor: default; /* Change cursor style */

}

 

#myUL li a:hover:not(.header) {

background-color: #eee; /* Add a hover effect to all links, except for headers */

}

Step 3 Add JavaScript:

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

 

 

 

 

 

 

 

 

 

 


P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top