Tengo un problema con el filtrado. Tengo mi filtro funcionando como quiero en su mayor parte. Actualmente tomo la entrada del usuario en formato de cadena, luego comparo esa cadena con el texto interno de mis divisiones itemWrapperColumns. Esto luego crea una matriz de ID que utilizo para comparar con mi objeto original de elementos en los que se basan mis itemWrapperColumns. Creo un nuevo objeto de solo los elementos que están incluidos en el filtro. Esto luego alimenta mi función que crea mi contenido HTML.

Esto es exactamente lo que quiero, ya que quiero limitar el contenido en pantalla a lo que el usuario quiere ver a través del filtro para que puedan aplicar ordenaciones a los datos ete....

El problema que tengo es si el usuario usa tres criterios para filtrar, por ejemplo; Inicio: 307 itemWrapperColumns Filtro de usuario: "x","y","z" Fin: 1 itemWrapperColumns

Si el usuario elimina "z", dejando así "x" e "y", esperaría ver 50 itemWrappers, pero debido a que el único itemWrapperColumns que tengo en este punto es el 1 del filtro anterior, eso es todo lo que queda.

Una idea sería crear una instantánea de las 307 itemWrapperColumns que se cargan al principio y luego usarlas como mis datos de filtro, pero no puedo descifrar esta parte. Esperaba que var itemWrapper lo resolviera, pero esa variable sigue actualizándose a medida que el filtro comienza a restringir el contenido.

Este es mi código para filtrar mis datos;

 // create a varaible full of all item wrappers from items in stash var itemWrappers = document.getElementsByClassName('itemWrapperColumns'); function itemFilter(){ var input, array, filter, txtValue, listofIDs, i, a; input = document.getElementById('userFilter'); array = input.value.split(','); itemWrappers = itemWrappers; listofIDs = [] // this loops through each item of object for (i = 0; i < itemWrappers.length; i++){ // assigned a variable to each item a = itemWrappers[i]; // grab all the text associated with the item txtValue = a.innerText; // console.log('item ID: ', a.getAttribute('data-id')) for (x = 0; x < array.length; x++){ y = array[x] if(array.every(item => txtValue.toUpperCase().includes(item.toUpperCase()))==true){ listofIDs.push(a.getAttribute('data-id')); } } } return listofIDs; }; // returns an itemList that is either all the items if there is no text in the filter // or returns a filtered down item list that gets passed onto displaying items function newItemsList() { var filterInput = document.getElementById('userFilter'); if (filterInput.value == ''){ var itemList = items; }else{ var itemList = items.filter(val => itemFilter().includes(val.id)); } return itemList }; // run functions on keyup of 'Enter' $('#userFilter').keyup(function(event) { if (event.keyCode === 13) {displayingItems(newItemsList()) } });