Search⌘ K
AI Features
Home
Courses
Developing Robust Web Applications with Ember.js

Searching Products in the category Route

Explore how to implement a search bar in an Ember.js category route by creating a controller with tracked properties and actions. Understand how to filter products dynamically using regular expressions, reset filters when routes change, and conditionally display filtered or all products based on user input.

We'll cover the following...

Now, let’s add a search bar in the category/index.hbs template to receive the filter value.

Adding a search bar

We need to add a search bar and set up the category.index controller to search the product in the category route. Let’s add the search bar in the app/templates/category/index.hbs template:

Node.js
{{!-- app/templates/categroy/index.hbs --}}
{{page-title "Category"}}
<div class="col-12">
    <div class="row">
		<div class="col-md-9">
            <form class="form-inline">
                <div class="form-group" style="display: inline-block;">
                    {{input type="text" class="form-control" value=filter  id="search" placeholder="Search Products..."}}
                </div>
                <div style="display: inline-block;">
                <button type="submit" {{action 'search'}} class="btn btn-primary">Search</button>
                </div>
            </form>
		</div>
	</div>
    <br>
    <div class="row">
        {{#each @model as |item|}}
            <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <br>
            <LinkTo   class="category_linkto"  @route="category.item" @model = {{item.id}} >
                <CategoryProduct @source={{item.imglink}} @title={{item.product_title}} @desc={{item.desc}} @price={{item.price}}/>
            </LinkTo>
            </div> 
            
        {{/each}}
    </div>
</div>
  • Line 3–15: We add a div of 12-col and wrap our search bar in a div of 9-col.
    • Line 8: We insert an input field with the search id.
    • Line 11: We create a button with the search click event.

Setting up the category/index controller

Next, we need to ...