Список. js не работает при использовании амперсанда (&) в значении

Question

При использовании амперсанда, явно как & или с использованием HTML кодов символов как &, Список. js разрывы. Вот код, работающий для первого фильтра, но не для второго:

$(function() {

  var options = {
    valueNames: ["name", "category"]
  };

  var userList = new List("search-results", options);
  var activeFilters = [];

  // filter
  $(".filter").change(function() {
    var isChecked = this.checked;
    var value = $(this).data("value");

    if (isChecked) {
      // add to list of active filters
      activeFilters.push(value);
    } else {
      // remove from active filters
      activeFilters.splice(activeFilters.indexOf(value), 1);
    }
    userList.filter(function(item) {
      if (activeFilters.length > 0) {
        return activeFilters.indexOf(item.values().category) > -1;
      }
      return true;
    });
  });

});

* {
  margin: 0;
  padding: 0;
  font-family: monaco;
}

body {
  margin: 0;
  padding: 10px;
  background: lightgreen;
}

ul {
  padding: 10px;
  list-style: none;
  color: white;
  background: blue;
}

ul span {
  margin-left: 4px
}

li {
  margin: 10px 0
}

.list {
  padding: 10px;
  background: steelblue;
}

.package {
  margin-bottom: 10px;
  background: pink;
}

.package .text {
  display: block;
}

.package .category {
  background: salmon;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li class="checkbox-btn">
    <label>
      <input class="filter" type="checkbox" name="history" data-value="History" /><span>History</span>
    </label>
  </li>
  <li class="checkbox-btn">
    <label>
      <input class="filter" type="checkbox" name="arts & crafts" data-value="Arts & Crafts" /><span>Arts & Crafts</span>
    </label>
  </li>
</ul>

<div class="results-container">
  <div id="search-results">
    <div class="list">

      <div class="package">
        <span class="text">Placeholder Text</span>
        <span class="category">History</span>
      </div>
      
      <div class="package">
        <span class="text">Placeholder Text</span>
        <span class="category">Arts & Crafts</span>
      </div>

      <div class="package">
        <span class="text">Placeholder Text</span>
        <span class="category">History</span>
      </div>
      
      <div class="package">
        <span class="text">Placeholder Text</span>
        <span class="category">Arts & Crafts</span>
      </div>
      
    </div>
  </div>
</div>

Есть идеи, как разрешить использование амперсанда в качестве отфильтрованного имени категории? Спасибо.

Answer 1

Похоже, что проблема связана с тем, как реализован List. js: Поиск по списку . js source на GitHub , можно найти множество ссылок на элементы innerHTML и outerHTML свойства, но нет ссылок на textContent или innerHTML свойства.

При регистрации аргумента item, переданного функции userList.filter, item._values отображается как

 _values: Object { name: "", category: "Arts & Crafts" }

так ясно list.js использует контент HTML для реализации фильтрации и получает (или вычисляет) Arts & Crafts как контент HTML, который он ищет в элементах класса category, используемых для фильтрации list.

Решение, предсказанное для решения проблемы, работает на практике: при обработке изменений ввода кнопки фильтра преобразуйте текст, содержащийся в атрибуте data-value, в формат "text / hmtl", который используется list.js (вместо того, чтобы оставить его как «текст / обычный текст»), прежде чем помещать его в массив activeFilters:

  // filter
  $(".filter").change(function() {
    var isChecked = this.checked;
    var value = $(this).data("value");
    value = value.replace("&", "&");  // filter value as "text/html" 

    if (isChecked) {
      // add to list of active filters
      activeFilters.push(value);
    } else {
      // remove from active filters
      activeFilters.splice(activeFilters.indexOf(value), 1);
    }
    userList.filter(function(item) {
      if (activeFilters.length > 0) {
        return activeFilters.indexOf(item.values().category) > -1;
      }
      return true;
    });
  });

Answer 2

Браузер заменяет & на &, поэтому вам необходимо снова включить функцию фильтра:

return activeFilters.indexOf(item.values().category.replace(/&/g, "&")) > -1;