Developing Robust Web Applications with Ember.js/

...

/

Searching Products in the category Route

Searching Products in the category Route

Learn to add the product search functionality in the category route.

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:

Press + to interact
{{!-- 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

...