Click here to Skip to main content
15,793,546 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have created a webpage for a restaurant menu. At the top of the page there is a simple search input bar that users can use to type in a specific item name. The goal is that as soon as the user starts typing, the menu will filter results of the matching items, whilst hiding the rest. I do not want to use a button or anything for this to work; I would just like the filtering to occur as soon as the user starts typing. Here is my css to hide the menu cards (which include the name of the item, details and price) that are filtered out.

.menu-card .hidden {
  display: none;

And here is a snippet of the HTML (there are multiple menu-cards like the one below):

<div class="searchbar">
        class="fa-solid fa-magnifying-glass">
        <input type="search" id="search" placeholder="Search menu" data-controller="search-bar" data-action="input->search-bar#search">

<div class="menu-card" data-search-bar-target="menuCard">
            <h4 class="item-name">Greek Village Salad with Feta</h4>
            <p class="item-details">Tomato, cucumber, green pepper, red onion, feta in a rich salad</p>
            <p class="item-price">£10.00</p>

I have also set up a stimulus controller and I can confirm that it is all connected so that is not the issue here. I think something might be missing from my code but I can't seem to figure out why it isn't working. If anyone has an idea, any help would be great!


import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menuCard"];

  connect() {
    // console.log("Hello, you are inside the search_bar controller!");

  search(event) {
    const searchInput =; // assigns the value of the text in the input field

    this.menuCardTargets.forEach((menuCard) => {
      const itemName = menuCard.querySelector(".item-name").textContent.toLowerCase();

      if (itemName.includes(searchInput)) { // if the name of the menu item is the same as whatever is inputted in the search field
        menuCard.classList.remove("hidden"); // display the menu card of the menu item
      } else {
        menuCard.classList.add("hidden"); // hide the menu card of all the items that do not match the input

What I have tried:

I have tried a couple of things to no avail! I even considered adding a button but I would rather not.
Updated 2-Jul-23 16:07pm

1 solution

This is a 3rd-party lib for JavaScript. Best place to get support is in their own community support forum: Hotwire Discussion[^]. From their welcome message:
Hotwire Discussion is a community forum for Hotwire 87, an approach to building modern web applications by sending HTML over the wire. This includes discussion about the Turbo 41 and Stimulus 32 JavaScript libraries.

Chat here with other developers to share tips, ask questions, and announce related projects.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900