Hacer funcionar filtro tipo input
Publicado por Pedro (18 intervenciones) el 02/02/2021 14:30:57
Buenos dias:
He creado un codigo para poder añadir tareas a una lista y filtrarlas por la prioridad y por el nombre con un evento de tipo input. He logrado añadir tareas y borrarlas, me funciona el filtro de prioridad de tipo change pero no logro que me filtre cuand escribo algo en el cuadro creado para ello. Se supone que si la tarea que busco es por ejemplo estudiar al poner una E ya sea mayuscula o miniscula me deberia saltar estudiar y todo lo que lleve una e. Os dejo el codigo por si podeis echarle un vistazo y ver donde me he equivocado.
//en esta parte he colocado los filtros. La consola no me da error al escribir pero no me muestra nada
He creado un codigo para poder añadir tareas a una lista y filtrarlas por la prioridad y por el nombre con un evento de tipo input. He logrado añadir tareas y borrarlas, me funciona el filtro de prioridad de tipo change pero no logro que me filtre cuand escribo algo en el cuadro creado para ello. Se supone que si la tarea que busco es por ejemplo estudiar al poner una E ya sea mayuscula o miniscula me deberia saltar estudiar y todo lo que lleve una e. Os dejo el codigo por si podeis echarle un vistazo y ver donde me he equivocado.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html> //He adjuntado el HTML por si el error pudiese estar ahi
<html lang="es">
<head>
<meta charset="UTF-8">
<title>TODO's list</title>
<link rel="stylesheet" type="text/css" href="css/style.css"></head><body> <script src = "js/modelo.js"></script> <div id="wrapper"> <header> <div class="insert"> <form action="#" method="get"> <input type="text" id="tituloTarea" placeholder="Introduce la tarea"> <select id="prioridad" required> <option value="">Selecciona una prioridad</option> <option value="urgente">Urgente</option> <option value="diaria">Diaria</option> <option value="mensual">Mensual</option> </select> <input type="submit" value="Guardar" id="guardar"> </form> <p id="mensaje"></p> </div> <div class="filter"> <select id="prioridadSelect"> <option value="">Todas las tareas</option> <option value="urgente">Urgente</option> <option value="diaria">Diaria</option> <option value="mensual">Mensual</option> </select> <input type="text" placerholder="Tarea a buscar" id="search"> </div> </header><!-- /header --> <main> <section class="notareas" id="notareas"> </section> <section class="tareas" id="tareas"> <!-- este contenido hay que comentarlo cuando empeceis a desarrollar el listado de tareas <article id="1" class="urgente"> <h2>Titulo de la tarea 1 - Esta tarea es DUMMY</h2> <a href="#" title="eliminar">Eliminar</a> </article> <article id="1" class="diaria"> <h2>Titulo de la tarea 1 - Esta tarea es DUMMY</h2> <a href="#" title="eliminar">Eliminar</a> </article> <article id="2" class="mensual"> <h2>Titulo de la tarea 2 - Esta tarea es DUMMY</h2> <a href="#" title="eliminar">Eliminar</a> </article> <article id="3" class="diaria"> <h2>Titulo de la tarea 3 - Esta tarea es DUMMY</h2> <a href="#" title="eliminar">Eliminar</a> </article> este contenido hay que comentarlo cuando empeceis a desarrollar el listado de tareas--> </section> </main> <footer><p>APP TODO's Proyecto Final</p>
</footer>
</div>
<script src = "js/filtros.js"></script>
<script src = "js/eventos.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var listaTareas = new Array();
listaTareas = [
{'idTarea': 1,
'titulo': 'Estudiar Javascript',
'prioridad': 'urgente'
},
{'idTarea': 2,
'titulo': 'Dormir',
'prioridad': 'diaria'
},
{'idTarea': 3,
'titulo': 'Salir a comer',
'prioridad': 'mensual'
},
{'idTarea': 4,
'titulo': 'Ir al gimnasio',
'prioridad': 'diaria'
}];1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function filterByPriority(pTasklist, pTaskPriority){
const filteredList = pTasklist.filter(task => {
return task.prioridad.toLowerCase() == pTaskPriority.toLowerCase()
})
return filteredList
}function searchByTask(pTaskList, pTaskName){
const filteredList = pTaskList.filter(task => {
return task.titulo.toLowerCase().includes(pTaskName.toLowerCase)
})
return filteredList
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
let btnInsert = document.querySelector("#guardar")
let sectionTasks = document.querySelector("#tareas")
let btnPriority = document.querySelector("#prioridadSelect")
let btnSearch = document.querySelector("#search")
let titulo = document.querySelector('#tituloTarea');
let prioridad = document.querySelector('#prioridad');
let id = 5function printTasks(pListTask) {
sectionTasks.innerHTML = "";
pListTask.forEach(task => TaskPrint(task));
}function TaskPrint(pTask) {
console.log(pTask);
let article = document.createElement("article")
let h2 = document.createElement("h2")
let taskName = document.createTextNode(pTask.titulo + " " )
let taskPriority = document.createTextNode(pTask.prioridad)
let buttonDelete = document.createElement("button")
article.classList.add(pTask.prioridad);
buttonDelete.innerText = "Delete"
buttonDelete.id = pTask.idTarea
buttonDelete.addEventListener('click', deleteTask)
article.appendChild(taskName, taskPriority)
h2.appendChild(taskName)
h2.appendChild(taskPriority)
h2.appendChild(buttonDelete)
article.appendChild(h2)
sectionTasks.appendChild(article);
}printTasks(listaTareas);
btnInsert.addEventListener("click", insertTask);
function insertTask(event) {
event.preventDefault();
let task = titulo.value
let priority = prioridad.value
if (titulo.value != "" && prioridad.value != "") {
saveTask(task, priority)
} else {
alert("Hay que rellenar todos los campos, tanto la prioridad como el nombre de la tarea")
}}function saveTask(pTask, pPriority) {
const newTask = {
idTarea: id,
titulo: pTask,
prioridad: pPriority } let exist = false;exist = listaTareas.some(task => {
return task.titulo.toLowerCase() == pTask.toLowerCase() && task.prioridad.toLowerCase() == pPriority.toLowerCase();
})
if (exist != true) {
listaTareas.push(newTask)
TaskPrint(newTask)
id++
} else {
alert("La tarea ya esta en la lista")
}}function deleteTask(event){
let idDelete = event.target.id
let deletePosition = listaTareas.findIndex(task =>{
return task.id = idDelete
})
listaTareas.splice(deletePosition, 1)
let liDelte = event.target.parentNode
liDelte.parentNode.removeChild(liDelte);
}btnPriority.addEventListener('change', changePriority);
function changePriority(event){
let prioridad = event.target.value
if (event.target.value != ""){
let taskList = filterByPriority(listaTareas, prioridad);
printTasks(taskList);
}else{
printTasks(listaTareas)
}}btnSearch.addEventListener('input', searchResults);
function searchResults(event){
let taskSearch = btnSearch.value
let searchList = searchByTask(listaTareas, taskSearch)
printTasks(searchList)
}function deleteTask(event){
let idDelete = event.target.id
let deletePosition = listaTareas.findIndex(task =>{
return task.id = idDelete
})
listaTareas.splice(deletePosition, 1)
let liDelte = event.target.parentNode
liDelte.parentNode.removeChild(liDelte);
}btnPriority.addEventListener('change', changePriority);
function changePriority(event){
let prioridad = event.target.value
if (event.target.value != ""){
let taskList = filterByPriority(listaTareas, prioridad);
printTasks(taskList);
}else{
printTasks(listaTareas)
}}btnSearch.addEventListener('input', searchResults); //este de aqui abajo seria el filtro tipo input
function searchResults(event){
let taskSearch = btnSearch.value
let searchList = searchByTask(listaTareas, taskSearch)
printTasks(searchList)
}Valora esta pregunta
0