Как создать форму поиска в Javascript с помощью выборки?

Question

Вот код, который у меня есть. В моей программе есть модель категорий и модель элементов. В категориях есть много предметов, и предметы принадлежат категориям. При запуске пользователь может создать новую категорию и добавлять в нее элементы. Моя функция поиска должна фильтровать по введенному имени категории. Итак, если есть категория гольфа, футбола или футбола, если я введу слово «футбол» в строку поиска, мне будет показана только футбольная карточка.

Вот код, который у меня есть на данный момент:

const BASE_URL = "http://localhost:3000";
const CATEGORIES_URL = `${BASE_URL}/categories`;
const ITEMS_URL = `${BASE_URL}/items`;

window.addEventListener("load", () => {
  getCategories();
  createNewCategory();
  displaySearch();

  
});

const main = () => {
  return document.querySelector("main"); //DOM Node, JS object
};


//loads all the categories
const getCategories = () => {
  fetch("http://localhost:3000/categories")
    .then((response) => response.json())
    .then((data) => renderCategories(data));
};

const renderCategories = (categoriesData) => {
  categoriesData.forEach((category) => renderCategoriesCard(category));
};

const renderCategoriesCard = (categories) => {
  let categoriesCard = document.createElement("div");
  categoriesCard.className = "card";
  categoriesCard.dataset.id = categories.id;
  categoriesCard.innerHTML = `
    <p>${categories.name}</p>
    <button data-category-id=${categories.id}>Add Item</button>
  `;
  categoriesCard.lastElementChild.addEventListener("click", displayItemForm);
  main().appendChild(categoriesCard);
  let itemsList = document.createElement("ul");
  itemsList.setAttribute("class", "items-list");
  itemsList.dataset.id = categories.id;
  categoriesCard.appendChild(itemsList);

  categories.items.forEach((item) => renderItems(item, itemsList));
};


const createNewCategory = () => {
  let form = document.querySelector("a");
  form.addEventListener("click", displayCategoryForm);
};

const displayCategoryForm = () => {
  let categoryForm = document.getElementById("category-form");
  let html = `
  <form>
    <label>Name</label>
    <input type="text" id="name">
    <input type="submit" value="Submit">
  </form>
  `;

  categoryForm.innerHTML = html;
  document.querySelector("form").addEventListener("submit", createCategory);
};

const createCategory = () => {
  event.preventDefault();
  console.log("Form clicked");

const category = {
    name: document.getElementById("name").value,
};

  createNewCategory();



  //fetch POST, configuration object
  fetch(CATEGORIES_URL, {
    method: "POST",
    body: JSON.stringify(category),
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
  })
    .then((response) => response.json())  //what destination server sent back 
                                          //turns body of response into javascript object
    .then((data) => {   
      renderCategoriesCard(data);  
      clearCategoryForm();
    });
};

const renderItems = (item, list) => {
  let itemCard = document.createElement("li");
  itemCard.id = `item-${item.id}`;
  itemCard.innerText = `Title: ${item.title}`;
  let releaseBtn = document.createElement("button");
  releaseBtn.className = "delete"; 
  releaseBtn.dataset.itemId = item.id;
  releaseBtn.innerText = "Delete";
  releaseBtn.addEventListener("click", deleteItem);
  itemCard.appendChild(releaseBtn);
  if (!list) {
    list = event.target.parentElement.lastElementChild;
  }
  list.appendChild(itemCard);
};

const clearForm = () => {
  let item = document.getElementById("item-form");
  item.innerHTML = "";
};
const clearCategoryForm = () => {
  let category = document.getElementById("category-form");
  category.innerHTML = "";
};

const deleteItem = () => {
  fetch(ITEMS_URL + `/${event.target.dataset.ItemId}`, {
    method: "DELETE",
  }).then(removeItem(event.target.dataset.itemId));
};

const removeItem = (id) => {
  let cardToRemove = document.getElementById(`item-${id}`);
  cardToRemove.parentElement.removeChild(cardToRemove);
};

const displayItemForm = () => {
  let itemForm = document.getElementById("item-form");
  let html = `
  <form data-category-id="${event.target.dataset.categoryId}">
    <label>Title</label>
    <input type="text" id="title">
    <label>Item Quantity</label>
    <input type="text" id="quantity">
    <input type="submit" value"Submit">
  </form>
  `;

  itemForm.innerHTML = html;
  document.querySelector("form").addEventListener("submit", createItem);
};

//createNewItem(); 

const createItem = () => {
  event.preventDefault();
  console.log("adding items...");
  let categoryCardId = event.target.dataset.categoryId;
  console.log(categoryCardId);
  const item = {
    title: document.getElementById("title").value,
    quantity: document.getElementById("quantity").value,
    category_id: categoryCardId,
  };
  
  console.log(item);

  fetch(ITEMS_URL, {
    method: "POST",
    body: JSON.stringify(item),
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
  })
    .then((response) => response.json())
    .then((data) => {
      let item = new Item(data);
      item.renderItem();
      clearForm();
    });
};

Это функция поиска:

const displaySearch = () => {
  let searchForm = document.getElementById("search-form");
  let html = `
  <form>
    <label>Name</label>
    <input type="text" id="name">
    <input type="submit" value="Submit">
  </form>
  `;

  searchForm.innerHTML = html;
  document.querySelector("form").addEventListener("submit", searchForCategories);
} //this works




const searchForCategories = () => {
  event.preventDefault();
  console.log("Form clicked");

  input = document.getElementById("name"); //works up to here

  fetch(CATEGORIES_URL)
    .then((response) => response.json())  
    .then((data) => {   
    console.log(data);   //currently I can only see the data entered
  });
}

, а вот html:

<!DOCTYPE html>
<html>
    <head>
        <title>Groceries</title>
        <link rel="stylesheet" href="index.css">
        <script src= "src/index.js"></script>
        <script src= "src/item.js"></script>
        <script src="src/search.js"></script>

        
    </head>
    <body>
        <h1>Groceries</h1>
        

        <a id="categoryForm" href="#">Add New Category</a><br>
        <div id="search-form"></div><br>
        <div id="category-form"></div><br>
        <main id="category-container">
            <div id="item-form"></div> 
        </main>
    </body>
    
</html>

Моя программа пока показывает панель поиска. Мне нужно получить данные с помощью fetch и отфильтровать их, чтобы отображалось только то, что введено в форму панели поиска. Я не могу использовать обычную панель поиска JS, она должна работать с выборкой. Любая помощь будет принята с благодарностью.