Learn How to Create a Filter List with JavaScript

Here is the solution for creating a filter list with JavaScript, with the HTML, CSS, and JavaScript code in separate files and optimized for SEO best practices.

HTML Code (`index.html`):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Discover how to create a searchable filter list using JavaScript. This tutorial will guide you through building an interactive search feature for any list of items.">
    <meta name="keywords" content="filter list, JavaScript filter, search list, filter items JavaScript, web development, JavaScript search filter, interactive filter list, searchable list tutorial">
    <meta name="author" content="Your Name">
    <meta property="og:title" content="Learn How to Create a Filter List with JavaScript">
    <meta property="og:description" content="Learn how to create an interactive filter list with JavaScript to easily search and filter through a list of items.">
    <meta property="og:image" content="image.jpg">
    <meta property="og:url" content="yourwebsite.com">
    <meta name="twitter:title" content="Learn How to Create a Filter List with JavaScript">
    <meta name="twitter:description" content="Create a searchable filter list with JavaScript. This tutorial will help you build an interactive search filter for any list of items.">
    <meta name="twitter:image" content="image.jpg">
    <meta name="twitter:card" content="summary_large_image">
    <title>Learn How to Create a Filter List with JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h2>My Phonebook</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..." title="Type in a name">

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

<script src="script.js"></script>

</body>
</html>

CSS Code (`style.css`):

/* Universal styles for all elements */
* {
  box-sizing: border-box;
}

/* Style for the search input field */
#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

/* Style for the unordered list */
#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Style for each list item */
#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
}

/* Hover effect for each list item */
#myUL li a:hover:not(.header) {
  background-color: #eee;
}

JavaScript Code (`script.js`):

function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");

    // Loop through all list items and hide those that do not match the search
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;

        // If the list item's text matches the filter, display it, else hide it
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

Explanation:

HTML Structure:
- The input field (#myInput) allows users to type in a search term.
- The unordered list (#myUL) contains a series of list items (<li>) representing the names in the phonebook.
CSS Styling:
- The search input (#myInput) is styled with padding, font size, and background image to make it visually appealing.
- The list (#myUL) is styled to remove default list styling and to make each list item stand out. A hover effect is added to improve interactivity.
JavaScript Functionality:
- The myFunction() function is triggered on every keystroke in the input field (onkeyup event).
- It compares the input text with the names in the list and hides the items that do not match the search query.
- The search is case-insensitive, and the list updates in real-time as the user types.
SEO Optimization:
- The meta title and description are optimized for SEO to target keywords like “filter list,” “search list,” “JavaScript filter,” and “interactive search filter.”
- The meta tags provide relevant keywords to improve search engine visibility.
- Each list item contains a descriptive link (<a href="#">Name</a>), which could help search engines understand the content better.

This solution allows users to quickly filter through a list of names (or any other type of data) using JavaScript

Learn How to Create a Filter List with JavaScript

HTML Code (index.html):

CSS Code (style.css):

JavaScript Code (script.js):

Explanation:

Leave a Reply Cancel reply

HTML Code (`index.html`):

CSS Code (`style.css`):

JavaScript Code (`script.js`):