如何从ul中搜索文本并实时显示结果？

时间：2018-12-19 03:34:49

标签： javascript html dom

我正在尝试能够在列出的任务中搜索文本，并在用户在输入框中键入内容后立即显示。我从w3schools获得了一小段代码，并尝试将其工作到当前的JS文件中，但似乎无法使其正常工作。也许有人可以让我走上正确的道路，并告诉我我做错了什么。

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

2 个答案:

答案 0 :(得分：0)

只需替换此代码taskFilter.addEventListener('oninput', filterTasks); 对此taskFilter.addEventListener('keyup', filterTasks);的使用，请参阅here以获取Java DOM中可用事件的列表。

答案 1 :(得分：0)

事件名称是“输入”，而不是“ oninput”。 另外，您的过滤器有误，文字位于<li>而不是<a>内。

您可以在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>

相关问题
最新问题