JavaScript - Filtrar array según opciones de varios input select

Filtrar array según opciones de varios input select

Publicado por Maritn (1 intervención) el 19/08/2022 01:27:53

Buenas tardes amigos,

Tengo el siguiente problema, estoy creando la pagina web para un amigo y me encuentro con el siguiente problema. La pagina es del tipo ecommerce, cuando el cliente entra debe ver todos los inmuebles, hasta ahí voy bien, el problema surge a la hora de filtrar el listado de inmuebles según un combo de filtros que tiene disponibles y paso a mostrar un ejemplo:

Input 1:
Categoría:
<select class="form-select" id="filterCategory">
<option value="0">Categoria</option>
<option value="Ventas" selected>Ventas</option>
<option value="Alquileres">Alquileres</option>
<option value="AlquilerTemporal">Alquiler temporal</option>
</select>
Input 2
Tipo
<select class="form-select" id="filterType">
<option value="0" selected>Tipo</option>
<option value="Apartamento">Apartamento</option>
<option value="Casa">Casa</option>
<option value="LocalComercial">Local Comercial</option>
<option value="Terreno">Terreno</option>
</select>
Input 3:
Departamento
<select class="form-select" id="filterDepartament">
<option value="0" selected>Departamento</option>
<option value="Colonia">Colonia</option>
<option value="Maldonado">Maldonado</option>
<option value="Montevideo">Montevideo</option>
<option value="Paysandú">Paysandú</option>
</select>

La idea es que la búsqueda sea exacta o parcial, por ejemplo, si el cliente quiere filtrar inmuebles solo de la categoría Alquiler, que traiga todos los alquileres, si selecciona inmuebles solo del tipo Apartamento, que traiga todos los apartamento, pero que si selecciona la categoría Alquiler y que sean de tipo Apartamento, que solo traiga los Apartamentos que estén para alquilar.

Probé un montón de métodos, filter, push, map, para crear un array de filtros y luego compararlos, pero no identifico en donde pueda estar errando, ya que si guardo los valores en una variable por consola el resultado es undefined o el array esta vacío, aunque si por consola busco por ejemplo el id filterDepartament me muestra el valor de la opción seleccionada sin problemas.

Realmente no se a que mas recurrir.. Agradezco si alguien puede darme una ayuda.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Filtrar array según opciones de varios input select

Publicado por Ivan (118 intervenciones) el 19/08/2022 11:48:27

Hola,

tienes que hacerlo en dos partes:

1 - Detectar los filtros activos en el formulario <select>

2 - Aplicar los filtros en la búsqueda de la DB

Te pongo un ejemplo sencillo, primero detectamos los filtros activos en el formulario y los pasamos a un array "filtro", luego recorremos el array y añadimos los filtros a la consulta de la DB tipo Mysql.

<html>

<head>

<script>

function filtros() {

	var filtro = [];

	var f1 = document.getElementById('filterCategory');

	var f2 = document.getElementById('filterType');

	var f3 = document.getElementById('filterDepartament');

	if (f1.selectedIndex != 0) filtro.push(f1.options[f1.selectedIndex].value);

	if (f2.selectedIndex != 0) filtro.push(f2.options[f2.selectedIndex].value);

	if (f3.selectedIndex != 0) filtro.push(f3.options[f3.selectedIndex].value);

	if (filtro.length == 0) {

		alert('SIN FILTROS');

		return;

	var consulta = "select mi_consulta_aqui where condiciones_aqui";

	for (var i=0; i<filtro.length; i++) {

		consulta += " AND mi_campo=" + filtro[i];

	alert(consulta);

</script>

</head>

<body>

<label>Categoría: </label>

<select class="form-select" id="filterCategory">

<option value="0">Categoria</option>

<option value="Ventas" selected>Ventas</option>

<option value="Alquileres">Alquileres</option>

<option value="AlquilerTemporal">Alquiler temporal</option>

</select>

<label>Tipo </label>

<select class="form-select" id="filterType">

<option value="0" selected>Tipo</option>

<option value="Apartamento">Apartamento</option>

<option value="Casa">Casa</option>

<option value="LocalComercial">Local Comercial</option>

<option value="Terreno">Terreno</option>

</select>

<label>Departamento </label>

<select class="form-select" id="filterDepartament">

<option value="0" selected>Departamento</option>

<option value="Colonia">Colonia</option>

<option value="Maldonado">Maldonado</option>

<option value="Montevideo">Montevideo</option>

<option value="Paysandú">Paysandú</option>

</select>

<button onclick="filtros()">Buscar</button>

</body>

</html>

A partir de este código te será fácil adaptarlo a tus necesidades.

Un saludo!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar