pretty good search with autocomplete

app/components/search/index.hbs

 <form class="d-flex flex-column autocomplete-search">
   <div class="d-flex">
-    <Input
-      @value={{this.query}}
-      {{on "input" this.doSearch}} />
-    <button class="btn btn-outline-success" type="submit">Search</button>
+    <div class="input-group">
+      <Input
+        @value={{this.query}}
+        {{on "input" this.doSearch}}
+        class="form-control" />
+        {{#if this.autocomplete_items}}
+          <button
+            {{on "click" this.clearSearch}}
+            class="btn btn-light border-0" type="button">
+              <i class="fa fa-times text-muted"></i>
+          </button>
+        {{/if}}
+         <button class="btn btn-light border-0" type="button">
+            <i class="fa fa-search text-muted"></i>
+         </button>
+    </div>
   </div>
   <ul class="autocomplete-items">
     {{#each this.autocomplete_items as |item|}}

app/components/search/index.js

@@ -47,4 +47,10 @@ export default class SearchComponent extends Component {
       }
     });
   }
+
+  @action
+  clearSearch() {
+    this.query = '';
+    this.autocomplete_items = [];
+  }
 }

app/styles/search.scss

@@ -4,12 +4,19 @@
   z-index: 10000;
   backround-color: #fff;
 
+  ul.autocomplete-items li:first-child {
+      border-top: 1px solid #d4d4d4;
+  }
+
+  ul.autocomplete-items li:last-child {
+      border-bottom: 1px solid #d4d4d4;
+  }
+
   ul.autocomplete-items {
     position: absolute;
     width: 100%;
     top: 3rem;
     background-color: white;
-    border: 1px solid #d4d4d4;
     margin: 0;
     padding: 0;
 
@@ -20,13 +27,16 @@
     }
 
     li {
+      list-style: none;
+
       background-color: #fff;
+      border-right: 1px solid #d4d4d4;
       border-left: 1px solid #d4d4d4;
-      z-index: 1000;
+
       margin-top: 0.5rem;
-      list-style: none;
       display: flex;
       align-items: center;
+
       margin: 0;
       padding: 0.75rem 1rem;