CSS contains选择器替代方案实现车型列表精准匹配筛选

安全阿岳

2026-9-26

问题原因

你当前使用的CSS属性包含选择器*=仅判断属性值是否包含搜索字符串，而你第三个列表项的data-custom-field-model值为 E-Tron S| E-Tron GT，天然包含E-Tron字符串，因此不会被判定为不符合条件的项，导致搜索E-Tron时也会展示该项。

解决方案

你的data-custom-field-model字段用|作为多车型的分隔符，因此可以先拆分字段值、去除前后空格后做精准匹配，修改后的代码如下：

let searchText = "E-Tron";
// 先选中所有待筛选的列表项
const containerItems = contentContainer.querySelectorAll('li[data-custom-field-filter-name^="Typ"]');

containerItems.forEach(function (el) {
    // 拿到车型字段值，按|拆分，去除每个项前后的空白字符
    const modelList = el.dataset.customFieldModel.split('|').map(item => item.trim());
    // 精准判断是否匹配搜索词
    if (!modelList.includes(searchText)) {
        el.classList.add('d-none');
    } else {
        // 匹配的话移除隐藏类，兼容多次搜索的场景
        el.classList.remove('d-none');
    }
});

效果验证