How to search text from a ul and display results in real time?

Question

I'm trying to be able to search for text inside the listed tasks and display right away as soon as a user types in the input box. I got a snippet of code from w3schools and tried to work it into my current JS file but can't seem to get it to work. Perhaps someone can get me on the right track and tell me what I did wrong.

 //Define UI Variables const form = document.querySelector('#task-form'); const taskList = document.querySelector('.task-list'); const clearTaskButton = document.querySelector('.clear-tasks-btn'); const taskFilter = document.querySelector('#task-filter'); const inputBox = document.querySelector('#input-box'); const addTaskButton = document.querySelector('.add-task-btn'); // Load event listeners loadEventListeners(); // Function to load event listeners function loadEventListeners() { form.addEventListener('submit', addTask); taskList.addEventListener('click', removeTask); clearTaskButton.addEventListener('click', clearTasks); taskFilter.addEventListener('oninput', filterTasks); } //Add Task function addTask(e) { if (inputBox.value === '') { alert('Please add a task!'); } //Create li element const liTag = document.createElement('li'); liTag.className = 'task-item'; //Append input from input box into li element liTag.appendChild(document.createTextNode(inputBox.value)); // Create new link element with a class of "delete-item" const linkTag = document.createElement('a'); linkTag.className = 'delete-item'; // Add icon HTML linkTag.innerHTML = '<i class="fas fa-times"></i>'; // Append link to li liTag.appendChild(linkTag); // Append li to ul taskList.appendChild(liTag); // Clear input inputBox.value = ''; e.preventDefault(); } //Remove Tasks function removeTask(e) { if (e.target.parentElement.classList.contains('delete-item')) { e.target.parentNode.parentNode.remove(); } } //Clear Tasks function clearTasks(e) { //Alert if there are no tasks (li) inside the task list (ul) if (taskList.childNodes.length < 1) { alert('No tasks to clear!'); } else { taskList.innerHTML = ''; } } //Filter Tasks function filterTasks(e) { var filter, liTag, a, i, txtValue; filter = taskFilter.value.toUpperCase(); liTag = taskList.getElementsByTagName('li'); for (i = 0; i < liTag.length; i++) { a = liTag[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { liTag[i].style.display = ""; } else { liTag[i].style.display = "none"; } } } 

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lato', sans-serif; } /* ====HEADING==== */ h1 { font-size: 1.2rem; font-weight: 400; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 4px; } h2 { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 5px; } h3 { font-size: 14px; font-weight: 400; color: #808080; margin-bottom: 10px; } .grid { display: flex; flex-direction: column; margin-top: 10px; } .add-task, .tasks { width: 75%; padding: 15px 15px; } /* Styles for smaller screens BEGIN */ @media only screen and (max-width: 600px) { .add-task, .tasks { width: 90%; } } /* Styles for smaller screens END */ .add-task, .tasks { margin: auto; border: 0.5px solid #E6E6E6; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); margin-bottom: 20px; } #input-box, #task-filter { margin-bottom: 20px; width: 100%; background: transparent; border: none; border-bottom: 1px solid #9E9E9E; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: black; } /* ====BUTTONS==== */ .add-task-btn, .clear-tasks-btn { padding: 10px 20px; border: 0; color: white; text-transform: uppercase; text-decoration: none; font-size: 1rem; } .add-task-btn { background: #00A081; border: 0px solid #000000; -webkit-appearance: none; } .clear-tasks-btn { background: black; } /* ====LIST OF TASKS==== */ .tasks { background: white; margin: 10px auto; padding-bottom: 20px; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); } .task-list { list-style-type: none; width: 100%; margin-bottom: 20px; } .task-list li { border: 1px solid #E0E0E0; padding: 10px 20px 10px 20px; display: flex; justify-content: space-between; } /* ===REMOVE TOP BORDER OF SECOND - FIFTH LI */ .task-list li:nth-child(n+2):nth-child(-n+5) { border-top: 0px; } /* ===ICONS=== */ .fas:hover { color: #26A69A; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Task List</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> <link rel="stylesheet" href="assets/css/tasklist.css" </head> <body> <div class="grid"> <div class="add-task"> <h1>Task List</h1> <form id="task-form"> <label for="input">New Task</label> <input type="text" name="input" id="input-box"> <input type="submit" value="Add Task" class="add-task-btn"> </form> </div> <div class="tasks"> <h2>Tasks</h2> <form id="insert-form"> <input type="text" name="insert" placeholder="Search for tasks.." id="task-filter"> </form> <ul class="task-list"></ul> <a href="#" class="clear-tasks-btn">Clear Tasks</a> </div> </div> <script src="assets/js/tasklist.js"></script> </body> </html> 

Answer 1

Just replace this code taskFilter.addEventListener('oninput', filterTasks); to this one taskFilter.addEventListener('keyup', filterTasks); , please do refer here for the list of available events for DOM in Javascript.

Answer 2

The event name is "input", not "oninput". Also your filter is wrong, the text is inside the <li> instead of <a> .

you can check the event name list here https://developer.mozilla.org/en-US/docs/Web/Events

 //Define UI Variables const form = document.querySelector('#task-form'); const taskList = document.querySelector('.task-list'); const clearTaskButton = document.querySelector('.clear-tasks-btn'); const taskFilter = document.querySelector('#task-filter'); const inputBox = document.querySelector('#input-box'); const addTaskButton = document.querySelector('.add-task-btn'); // Load event listeners loadEventListeners(); // Function to load event listeners function loadEventListeners() { form.addEventListener('submit', addTask); taskList.addEventListener('click', removeTask); clearTaskButton.addEventListener('click', clearTasks); taskFilter.addEventListener('input', filterTasks); } //Add Task function addTask(e) { if (inputBox.value === '') { alert('Please add a task!'); } //Create li element const liTag = document.createElement('li'); liTag.className = 'task-item'; //Append input from input box into li element liTag.appendChild(document.createTextNode(inputBox.value)); // Create new link element with a class of "delete-item" const linkTag = document.createElement('a'); linkTag.className = 'delete-item'; // Add icon HTML linkTag.innerHTML = '<i class="fas fa-times"></i>'; // Append link to li liTag.appendChild(linkTag); // Append li to ul taskList.appendChild(liTag); // Clear input inputBox.value = ''; e.preventDefault(); } //Remove Tasks function removeTask(e) { if (e.target.parentElement.classList.contains('delete-item')) { e.target.parentNode.parentNode.remove(); } } //Clear Tasks function clearTasks(e) { //Alert if there are no tasks (li) inside the task list (ul) if (taskList.childNodes.length < 1) { alert('No tasks to clear!'); } else { taskList.innerHTML = ''; } } //Filter Tasks function filterTasks(e) { var filter, liTag, a, i, txtValue; filter = taskFilter.value.toUpperCase(); liTag = taskList.getElementsByTagName('li'); for (i = 0; i < liTag.length; i++) { txtValue = liTag[i].textContent || liTag[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { liTag[i].style.display = ""; } else { liTag[i].style.display = "none"; } } } 

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lato', sans-serif; } /* ====HEADING==== */ h1 { font-size: 1.2rem; font-weight: 400; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 4px; } h2 { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 5px; } h3 { font-size: 14px; font-weight: 400; color: #808080; margin-bottom: 10px; } .grid { display: flex; flex-direction: column; margin-top: 10px; } .add-task, .tasks { width: 75%; padding: 15px 15px; } /* Styles for smaller screens BEGIN */ @media only screen and (max-width: 600px) { .add-task, .tasks { width: 90%; } } /* Styles for smaller screens END */ .add-task, .tasks { margin: auto; border: 0.5px solid #E6E6E6; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); margin-bottom: 20px; } #input-box, #task-filter { margin-bottom: 20px; width: 100%; background: transparent; border: none; border-bottom: 1px solid #9E9E9E; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: black; } /* ====BUTTONS==== */ .add-task-btn, .clear-tasks-btn { padding: 10px 20px; border: 0; color: white; text-transform: uppercase; text-decoration: none; font-size: 1rem; } .add-task-btn { background: #00A081; border: 0px solid #000000; -webkit-appearance: none; } .clear-tasks-btn { background: black; } /* ====LIST OF TASKS==== */ .tasks { background: white; margin: 10px auto; padding-bottom: 20px; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); } .task-list { list-style-type: none; width: 100%; margin-bottom: 20px; } .task-list li { border: 1px solid #E0E0E0; padding: 10px 20px 10px 20px; display: flex; justify-content: space-between; } /* ===REMOVE TOP BORDER OF SECOND - FIFTH LI */ .task-list li:nth-child(n+2):nth-child(-n+5) { border-top: 0px; } /* ===ICONS=== */ .fas:hover { color: #26A69A; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Task List</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> <link rel="stylesheet" href="assets/css/tasklist.css" </head> <body> <div class="grid"> <div class="add-task"> <h1>Task List</h1> <form id="task-form"> <label for="input">New Task</label> <input type="text" name="input" id="input-box"> <input type="submit" value="Add Task" class="add-task-btn"> </form> </div> <div class="tasks"> <h2>Tasks</h2> <form id="insert-form"> <input type="text" name="insert" placeholder="Search for tasks.." id="task-filter"> </form> <ul class="task-list"></ul> <a href="#" class="clear-tasks-btn">Clear Tasks</a> </div> </div> <script src="assets/js/tasklist.js"></script> </body> </html>