Wyszukiwarka To-do list

pytanie zadane 9 kwietnia 2021 w JavaScript przez Ziom54d4 Początkujący (350 p.)
edycja 9 kwietnia 2021 przez Ziom54d4

Witam!
Tworząc To-do list natknąłem się na jeden problem związany z wyszukiwarką poszczególnych zadań. W momencie kiedy wyszukuje daną frazę wyświetla się zadanie (lub kilka zadań) i gdy go usuwam to reszta zadań która nie została wyświetlona (bo nie pasowała do wpisanego tekstu) zostaje usunięta tak jakby wcześniej nie została dodana. Prosiłem już o pomoc ale jedyną wskazówkę jaką dostałem to to że powinienem działać na niezmienionej tablicy taskList ale niewiele mi to pomogło.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <title>ToDoList</title>
    <style>
        li {
            padding: 5px;
            list-style-type: none;
        }
    </style>
</head>

<body>
    <form action="">
        <input type="text"> <button class="addTask">Dodaj zadanie</button>
        <input type="text" name="search" placeholder="Wyszukaj zadanie">
    </form>
    <h1>Liczba zadań:<span> 0 </span></h1>
    <ul>
        
    </ul>
    <script src="main.js"></script>
</body>
</html>

const form = document.querySelector("form");
const input = document.querySelector("input");
const buttonTask = document.querySelector("button.addTask");
const searchInput = document.querySelector('input[name="search"]');
let taskNumber = document.querySelector("h1 span");
const ul = document.querySelector("ul");
let taskList;

const removeTask = (e) => {
    e.target.parentNode.remove();
    taskList = document.querySelectorAll(".task");
    taskNumber.textContent = ` ${taskList.length} `;
}

const addTask = (e) => {
    e.preventDefault();
    const task = input.value;
    if(task === "") return;
    const liElement = document.createElement("li");
    liElement.innerHTML = task + " <button>Usuń</button>";
    liElement.className = "task";
    ul.appendChild(liElement);
    taskList = document.querySelectorAll(".task");
    taskNumber.textContent = ` ${taskList.length} `;
    input.value = ``;
    liElement.querySelector("button").addEventListener("click",removeTask);
}

const searchTask = (e) => {
    const nameTask = e.target.value.toLowerCase();
    let tasks = [...taskList];
    tasks = tasks.filter(li => li.textContent.toLowerCase().includes(nameTask));
    ul.textContent = "";
    tasks.forEach(li => ul.appendChild(li));
    let numberTask = tasks.filter(li => li.style.display = "block");
    taskNumber.textContent = ` ${numberTask.length} `;
}

form.addEventListener("submit", addTask);

searchInput.addEventListener("input",searchTask);

2 odpowiedzi

odpowiedź 10 kwietnia 2021 przez VBService Ekspert (253,340 p.)
wybrane 10 kwietnia 2021 przez Ziom54d4

Najlepsza

Problem był, że w momencie, gdy flitowałeś listę <ul> wartością z <input type="text" name="search" ...>

tasks = tasks.filter(li => li.textContent.toLowerCase().includes(nameTask));

"zerowałeś" bezpowrotnie listę <ul>, przecież chodzi tylko o "ukrycie, nieszukanych" elementów <li>

ul.textContent = "";

dodałem, gdy <ul> jest puste to "nic nie rób"

if (ul.textContent.trim() != "") {
  . . .
}

Spróbuj

const searchTask = (e) => {  
  if (ul.textContent.trim() != "") {
    const nameTask = e.target.value.toLowerCase();
    let tasks = [...taskList];
    tasks = tasks.filter(li => li.textContent.toLowerCase().includes(nameTask));
    // ul.textContent = "";
    const li_hidden = document.querySelectorAll("ul li");
    li_hidden.forEach(li => li.style.display = "none");
    tasks.forEach(li => ul.appendChild(li));
    let numberTask = tasks.filter(li => li.style.display = "block");
    taskNumber.textContent = ` ${numberTask.length} `;
  }
}

"Kosmetyczne" poprawki - propozycje.

const removeTask = (e) => {
    e.target.closest('li.task').remove();  
    taskList = document.querySelectorAll(".task");
    taskNumber.textContent = ` ${taskList.length} `;
}

    <h1>Liczba zadań: <span>0</span></h1>
    <ul></ul>
    <script src="main.js"></script>

1	komentarz 10 kwietnia 2021 przez Ziom54d4 Początkujący (350 p.) Dziękuję serdecznie za pomoc i wskazówki :)

odpowiedź 9 kwietnia 2021 przez mb-dir Mądrala (6,710 p.)

Witaj,

Mógłbyś udostępnić cały kod(w szczególności HTML)? Podejrzewam, że problem tkwi w tym, że pobierana jest lista tasków(taskList) za każdym razem, gdy wywoływana jest funkcja removeTask - więc gdy taski są ukryte(działanie funkcji searchTask), i użytkownik usuwa widoczy element, to do zmiennej taskList jest przypisywana jest tablica obecnie widocznych tasków minus ten usunięty i daltego znikają pozostałe(ukryte) zadania, jednak bez "dotknięia" kodu nie moge potwierdzić, czy ta teoria jest prawdziwa