Wyszukiwanie z to do listy

0

Cześć, mam problem z funkcją pozwalającą na wyszukanie elementów dodanych do listy przy użyciu metody 'filter'. Funkcja searchTask działa w przypadku gdy dodam elementy ręcznie w html, gdy jednak dodaje je za pomocą funkcji w js następuję następujące: po wpisaniu szukanych liter do inputa elementy są prawidłowo filtrowane, jednak gdy usuwam tekst z inputa elementy, które nie pasowały do szukanej frazy nie są przywracane. Ktoś poradzi co tu można zmienić? Poniżej kod

<!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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>To do list</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }

        h1, h2 {
            text-align: center;
            margin: 30px;
        }
        .container {
            margin-top: 20px;
        }

        form {
            display: flex;
            width: 50vw;
            margin: 20px auto;
        }

        .add-item input {
            margin-right: 20px;
        }

        ul {
            text-align: center;
        }
    </style>
</head>
<body>
    
    <h1>Lista zadań</h1>

  
            <form action="" class="add-item">
                <input type="text" class="form-control" id="add-input" placeholder="Wpisz zadanie">
                <button id="js-newGameButton" class="btn btn-success"> Dodaj </button>
            </form>   

            <form action="" class="search-item">
                <input type="text" class="form-control" id="search-input" placeholder="Wyszukaj">
            </form>   

            <h2>Liczba zadań: <span>0</span></h2>

            <ul class="list-group">
                    
            </ul>
        

<script >
const addForm = document.querySelector('.add-item');
const ul = document.querySelector('ul');
const taskNumber = document.querySelector('h2 span');
const listItems = document.getElementsByClassName('list-group-item');
const addInput = document.querySelector('#add-input');
const searchInput = document.querySelector('#search-input');


const removeTask = (e) => {
    e.target.parentNode.remove();
    taskNumber.textContent = listItems.length;
}


const addTask = (e) => {
    e.preventDefault();
    
    const titleTask = addInput.value;

    if(titleTask === "") return; //jeśli input titleTask pozostanie pusty, po kliknięciu 'Dodaj' nic się nie wykona
    const task = document.createElement('li');
    task.className = 'list-group-item';
    task.innerHTML = titleTask + ` <button class="btn btn-secondary btn-sm"> Usuń </button>`;
    ul.appendChild(task);
    
    addInput.value = ""

    task.querySelector('button').addEventListener('click', removeTask);
    taskNumber.textContent = listItems.length;
    
    
}


addForm.addEventListener('submit', addTask);



const searchTask = (e)=> {
    const searchText = e.target.value.toLowerCase();
    let tasks =[...listItems];
    tasks = tasks.filter(li=> li.textContent.toLowerCase().includes(searchText));
    console.log(tasks);
    ul.textContent = "";
    tasks.forEach(li=> ul.appendChild(li))
    
}



searchInput.addEventListener('input', searchTask);

    
    
</script>
</body>
</html>
0

Wygląda na to, że twoja funkcja filtrująca fizycznie usuwa elementy niepasujące do filtra.

Zamiast usuwania, uczyń je po prostu niewidocznymi. Wtedy będą dostępne dla kolejnych zapytań filtra.

0

Sprawdziłem, ale to chyba nie jest to. W przypadku gdy mamy tylko elementy li ręcznie umieszczone w ul, a następne pobierane za pomocą querySelectorAll ta funkcja działa (przeglądarka widzi elementy jako NodeList). Tutaj dochodzi jeszcze dodawanie po kliknięciu. Zauważyłem że przy pobraniu elementów przez getElementsByClassName ta funkcja nie zadziała. Próbuję podpiąć dodane elementy pod nową zmienna pobraną za pomocą querySelectorAll ale też to nie chce działać... W consol logu pokazuje tak jakby ta nowa zmienna liElem była pusta..

const liElem = document.querySelectorAll('li');

const searchTask = (e)=> {
    const searchText = e.target.value.toLowerCase();
    
    let tasks =[...liElem];
    tasks = tasks.filter(li=> li.textContent.toLowerCase().includes(searchText));
    console.log(tasks);
    ul.textContent = "";
    
    tasks.forEach(li=> ul.appendChild(li))
    
}

searchInput.addEventListener('input', searchTask);

1 użytkowników online, w tym zalogowanych: 0, gości: 1