Question

0

182

Vistas

Alternative to the contains selector

I have a list of vehicle models and would like to display the associated types. As a selector I have written the types in a data-field. Now I want to hide with the class d-none all list items that do not match the selection.

This works with my current code. The problem is that I also get "Example Type 3" displayed in this example. But I only want to have "Example Type 2".

How can I make it so that only the 2nd element is displayed here but I can still search for "E-Tron S" or "E-Tron GT"?

My javascript so far:

    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');
});

html list

<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>

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-10T08:45:09.816Z

There is no exact text matching or reg exp in the selector, so you need to do the filtering without using the contains selector.

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>

0

182

Alternative to the contains selector

1 Respuestas

0

Encuentra empleos remotos

Andres GPT