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

Searching Products in the admin Route

Explore how to implement product search functionality in the Ember.js admin route by adding a search bar and setting up an admin controller. Learn to filter products based on user input, manage filter states using tracked properties, and load filtered results dynamically while integrating with Firebase.

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. ...