Filtering trends and schedulers

[buuuudzik]

Hi everyone,

I've created today such helpful tool for filtering list of trends and schedulers in Trends and Schedulers pages. This is a javascript code which could be used for this task. It must be added to Custom Javascript:

Code:

// SEARCH INPUT IN TRENDS AND SCHEDULERS
$(function(){
  if (document.body.classList.contains('usermode')) return;
 
  const sidebar = document.querySelector(".sidebar");
 
  if (!sidebar) return;
 
  const getItems = () => {
    listItems = [...document.querySelectorAll(".sidebar li")].filter(item => {
      return !["divider", "holidays-menu-item", "group"].some(className => item.classList.contains(className));
    });
      spans = listItems.map(item => item.querySelector("span"));
  }
 
  const input = document.createElement("input");
  input.placeholder = "Search";
  input.style.width = "100%";
  input.style.boxSizing = "border-box";
  input.style.padding = "5px";
  input.style.marginBottom = "10px";
  input.style.borderRadius = "5px";
  input.style.position = "sticky";

  input.style.top = 0;
 
  let listItems, spans;
 
  input.addEventListener("input", ({target: { value }}) => {
    if (!listItems) getItems();
   
      listItems.forEach((item, i) => {
      const spanValue = spans[i].textContent.toLowerCase();
      const inputValue = value.toLowerCase();
      const match = spanValue.match(inputValue);
        if (match) item.style.display = "block";
      else item.style.display = "none";
    });
  });
  sidebar.prepend(input);
});