search with transition to the found document!

app/components/search/autocomplete-item/index.hbs

+<li {{on "click" this.onClick}}>
+  <div class="icon {{@item.type}}"></div>
+  <div class="title">{{@item.title}}</div>
+  <div class="path text-muted">{{@item.path}}</div>
+</li>
\ No newline at end of file

app/components/search/autocomplete-item/index.js

+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+
+export default class AutocompleteItemComponent extends Component {
+  @action
+  onClick() {
+    this.args.onOpen(this.args.item);    
+  }
+}

app/components/search/autocomplete_item.hbs

-<li>
-  <div class="icon {{@type}}"></div>
-  <div class="title">{{@title}}</div>
-  <div class="path text-muted">{{@path}}</div>
-</li>
\ No newline at end of file

app/components/search/index.hbs

 <form class="d-flex flex-column autocomplete-search">
   <div class="d-flex">
     <div class="input-group">
+      <button class="btn btn-light border-0" type="button">
+         <i class="fa fa-search text-muted"></i>
+      </button>
       <Input
         @value={{this.query}}
         {{on "input" this.doSearch}}
@@ -12,17 +15,13 @@
               <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|}}
       <Search::AutocompleteItem
-        @title={{item.title}}
-        @path={{item.path}}
-        @type={{item.type}} />
+        @item={{item}}
+        @onOpen={{this.openItem}} />
     {{/each}}
   </ul>
 </form>

app/components/search/index.js

@@ -7,6 +7,7 @@ import { A } from '@ember/array';
 // https://discuss.emberjs.com/t/how-to-force-re-render-a-glimmer-component/18150
 export default class SearchComponent extends Component {
   @service requests;
+  @service router;
   @tracked query;
   @tracked autocomplete_items = A([]);
   /*
@@ -41,6 +42,7 @@ export default class SearchComponent extends Component {
 
     this.autocomplete_items = data.map(item => {
       return {
+        'document_id': item.document_id,
         'title': item.title,
         'type': 'document',
         'path': item.breadcrumb,
@@ -50,6 +52,19 @@ export default class SearchComponent extends Component {
 
   @action
   clearSearch() {
+    this._reset();
+  }
+
+  @action
+  openItem(item) {
+    console.log(`click title=${item.title} ID=${item.document_id}`);
+    if (item.type == 'document') {
+      this.router.transitionTo('authenticated.document', item.document_id);
+      this._reset();
+    }
+  }
+
+  _reset() {
     this.query = '';
     this.autocomplete_items = [];
   }