Tengo una lista de modelos de vehículos y me gustaría mostrar los tipos asociados. Como selector, he escrito los tipos en un campo de datos. Ahora quiero ocultar con la clase d-none todos los elementos de la lista que no coinciden con la selección.
Esto funciona con mi código actual. El problema es que también aparece "Ejemplo Tipo 3" en este ejemplo. Pero solo quiero tener "Ejemplo Tipo 2".
¿Cómo puedo hacer que solo se muestre el segundo elemento aquí, pero aún puedo buscar "E-Tron S" o "E-Tron GT"?
Mi javascript hasta ahora:
let searchText = "E-Tron"; containerItems = contentContainer.querySelectorAll('li[data-custom-field-filter-name^="Typ"]:not([data-custom-field-model*="' + searchText + '"])'); containerItems.forEach(function (el) { el.classList.add('d-none'); });lista html
<ul class="container"> <li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" Q5"> <a href="#"><button> Example Type 1 </button></a> </li> <li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" E-Tron"> <a href="#"><button> Example Type 2 </button></a> </li> <li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" E-Tron S| E-Tron GT"> <a href="#"><button> Example Type 3 </button></a> </li> </ul>No hay una coincidencia de texto exacta o una expresión regular en el selector, por lo que debe filtrar sin usar el selector de contenido.
const searchText = "E-Tron"; const allLis = document.querySelectorAll('li[data-custom-field-filter-name="Typ"]'); var regex = new RegExp("\\b" + searchText + "($|\\|)"); allLis.forEach(x => { if(!regex.test(x.dataset.customFieldModel)) { x.classList.add("d-none"); } }); .d-none { display: none; } <ul class="container"> <li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" Q5"> <a href="#"><button> Example Type 1 </button></a> </li> <li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" E-Tron"> <a href="#"><button> Example Type 2 </button></a> </li> <li class="has-button" data-custom-field-filter-name="Typ" data-custom-field-model=" E-Tron S| E-Tron GT"> <a href="#"><button> Example Type 3 </button></a> </li> </ul>