I have created a page and on that page are all the commands in obsidian. I am trying to create a search bar that filters out the results and only displays the commands that contain the text i am typing, live.

Here is all the code for the search bar,
it just wont filter out the text. no matter what i type, nothing gets filtered.
i dont know what else to do

class RenameShortcutsSettingTab extends PluginSettingTab {
  constructor(app, plugin) {
    super(app, plugin);
    this.plugin = plugin;
  }

  display() {
    const { containerEl } = this;
    containerEl.empty();

    // Add search input
    const searchInput = containerEl.createEl('input', {
      attr: { type: 'text', placeholder: 'Search commands...' }
    });
    searchInput.style.marginBottom = '10px'; // Space below the input
    searchInput.addEventListener('keyup', () => {
      this.searchCommands(searchInput.value);
    });

    // Create command settings here...
  }

  searchCommands(input) {
    input = input.toLowerCase();
    const settings = containerEl.querySelectorAll('.setting-item'); // Get all command settings

    settings.forEach(setting => {
      const commandName = setting.querySelector('.setting-item-name').textContent.toLowerCase();
      setting.style.display = commandName.includes(input) ? '' : 'none'; // Show/hide based on search
    });
  }
}