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

Searching Products in the admin Route

Let's add the product search functionality in the admin route.

We'll cover the following...

We can insert the search product functionality in the admin route. We need to add a search bar in the template, and then we can search our products based on the searched filter.

Adding a search bar

To search the product in the admin route, we need to add a search bar to the admin route and set up the admin controller. In the code below, let’s add the search bar in app/templates/admin.hbs:

Node.js
{{!-- app/templates/admin.hbs --}}
{{!-- app/templates/admin.hbs --}}
{{page-title "Admin"}}
<br>
  {{!-- Create product div--}}
<div class="row">
	
  <div class="col-4 add_edit">
        <LinkTo class='btn btn-success' @route="admin.add" >Add Product</LinkTo>
        {{!-- <LinkTo class='btn btn-success' @route="admin.edit" @model="123">Edit</LinkTo> --}}
		<hr>
		{{outlet}}  
  </div>
	<div class="col-8 products">
    {{!-- search div --}}
    <div class="row">
			<div class="col-md-8">
				
        <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>
    {{!-- search div end --}}
    {{!-- product div --}}
    <div class="row">
      {{#each @model as |item|}}
        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
          <br>
          <AdminProduct @source={{item.imglink}} @title={{item.product_title}} @desc={{item.desc}} @price={{item.price}} @route="admin.edit" @model={{item.id}}>
          </AdminProduct>
        </div> 
      {{/each}}
    </div>
    {{!-- product div end--}}
  </div>
</div>
  • Lines 20–34: We create a row div and add a search bar with a button.

    • Line 26: We insert an input field with the search id. ...