Как улучшить фильтрацию в этом простом приложении в чистом JavaScript - PullRequest
Новая
       46

Как улучшить фильтрацию в этом простом приложении в чистом JavaScript

0 голосов
/ 30 сентября 2019

Я работаю над своим простым приложением (можно добавлять задачи в список, удалять его, искать и фильтровать). У меня есть одна проблема, потому что, когда я пишу что-то в поиске ввода, все в порядке (фильтрация работает хорошо). Но когда я удаляю буквы (backspace) или удаляю весь текст, у меня появляется пустой список без задач. Не могли бы вы улучшить мой код? Вот мой код: 

const addInput = document.querySelector('.add input');
const searchInput = document.querySelector('.search input');
const addButton = document.querySelector('.add button');
const ul = document.querySelector('ul');

const taskNumber = document.querySelector('h1 span');
let tasks = 0;

const addTask = (e) => {
    e.preventDefault();
    tasks++;
    let task = addInput.value;
    if (task === '') return;
    const li = document.createElement('li');
    li.innerHTML = task + " <button> X </button>"
    ul.appendChild(li);
    // console.log(task);
    addInput.value = '';
    taskNumber.textContent = tasks;
    li.querySelector('button').addEventListener('click', deleteTask);


}
const searchTask = (e) => {
    const text = e.target.value.toLowerCase();
    let lis = [...document.querySelectorAll('li')];
    
    lis = lis.filter(li => li.textContent.toLowerCase().includes(text));
    ul.textContent = '';
    lis.forEach(li => ul.appendChild(li));
}


const deleteTask = (e) => {
    e.target.parentNode.remove();
    tasks--;
    taskNumber.textContent = tasks;
}



addButton.addEventListener('click', addTask)
searchInput.addEventListener('input', searchTask);
<!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>To-do app</title>
</head>

<body>
    <form class="add" action=''>
        <input type="text">
        <button>Add</button>
    </form>
    <h1>Numbers of tasks: <span>0</span></h1>
    <ul></ul>
    <form class="search" action=''>
        <input type="search" placeholder="search">
    </form>

</body>

1 Ответ

0 голосов
/ 30 сентября 2019

Проблема в том, что вы перезаписываете содержимое ul с помощью ul.textContent = '';

Быстрый способ сделать это - добавить класс .hidden в ваш css, добавить егодо li s, если они не соответствуют входным данным поиска, чтобы скрыть несопоставимые результаты: 

const addInput = document.querySelector('.add input');
const searchInput = document.querySelector('.search input');
const addButton = document.querySelector('.add button');
const ul = document.querySelector('ul');

const taskNumber = document.querySelector('h1 span');
let tasks = 0;

const addTask = (e) => {
  e.preventDefault();
  tasks++;
  let task = addInput.value;
  if (task === '') return;
  const li = document.createElement('li');
  li.innerHTML = task + " <button> X </button>"
  ul.appendChild(li);
  // console.log(task);
  addInput.value = '';
  taskNumber.textContent = tasks;
  li.querySelector('button').addEventListener('click', deleteTask);


}
const searchTask = (e) => {
  const text = e.target.value.toLowerCase();
  let lis = [...document.querySelectorAll('li')];

  // lis = lis.filter(li => li.textContent.toLowerCase().includes(text));
  // ul.textContent = '';
  lis.forEach(li => li.textContent.toLowerCase().includes(text) ? li.classList.remove('hidden') : li.classList.add('hidden'));
}


const deleteTask = (e) => {
  e.target.parentNode.remove();
  tasks--;
  taskNumber.textContent = tasks;
}



addButton.addEventListener('click', addTask)
searchInput.addEventListener('input', searchTask);
.hidden {
  display: none;
}
<!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>To-do app</title>
</head>

<body>
  <form class="add" action=''>
    <input type="text">
    <button>Add</button>
  </form>
  <h1>Numbers of tasks: <span>0</span></h1>
  <ul></ul>
  <form class="search" action=''>
    <input type="search" placeholder="search">
  </form>

</body>

Или, иметь массив элементов, в который вы бы добавили новый li, удалить его из этого массива при удалении и использовать его дляотфильтровать результаты поиска: 

const addInput = document.querySelector('.add input');
const searchInput = document.querySelector('.search input');
const addButton = document.querySelector('.add button');
const ul = document.querySelector('ul');
var elements = [];

const taskNumber = document.querySelector('h1 span');
let tasks = 0;

const addTask = (e) => {
  e.preventDefault();
  tasks++;
  let task = addInput.value;
  if (task === '') return;
  const li = document.createElement('li');
  li.innerHTML = task + " <button id=" + tasks + "> X </button>"
  li.id = tasks;
    
  ul.appendChild(li);
  // console.log(task);
  addInput.value = '';
  taskNumber.textContent = tasks;
  li.querySelector('button').addEventListener('click', (e) => deleteTask(e, tasks));

  elements.push(li);

}
const searchTask = (e) => {
  const text = e.target.value.toLowerCase();
  let lis = [...document.querySelectorAll('li')];

   lis = elements.filter(li => li.textContent.toLowerCase().includes(text));
   ul.textContent = '';
   lis.forEach(li => ul.appendChild(li));
}


const deleteTask = (e, id) => {
  e.target.parentNode.remove();
  elements = elements.filter(el => {
    return +el.id !== id;
  })
  tasks--;
  taskNumber.textContent = tasks;
}



addButton.addEventListener('click', addTask)
searchInput.addEventListener('input', searchTask);
.hidden {
  display: none;
}
<!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>To-do app</title>
</head>

<body>
  <form class="add" action=''>
    <input type="text">
    <button>Add</button>
  </form>
  <h1>Numbers of tasks: <span>0</span></h1>
  <ul></ul>
  <form class="search" action=''>
    <input type="search" placeholder="search">
  </form>

</body>
...