added autocomplete

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -6,7 +6,7 @@
   </button>
   <form (ngSubmit)="search()" class="w-100">
     <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search"
-      [formControl]="searchField">
+      [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)">
   </form>
   <ul class="navbar-nav px-3">
     <li class="nav-item text-nowrap">

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { from, Observable, of, scheduled, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { AuthService } from 'src/app/services/auth.service';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
+import { SearchService } from 'src/app/services/rest/search.service';
   
 @Component({
   selector: 'app-app-frame',
@@ -13,7 +15,7 @@ import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 })
 export class AppFrameComponent implements OnInit, OnDestroy {
 
-  constructor (public router: Router, private openDocumentsService: OpenDocumentsService, private authService: AuthService) {
+  constructor (public router: Router, private openDocumentsService: OpenDocumentsService, private authService: AuthService, private searchService: SearchService) {
   }
 
   searchField = new FormControl('')
@@ -22,6 +24,35 @@ export class AppFrameComponent implements OnInit, OnDestroy {
 
   openDocumentsSubscription: Subscription
 
+  searchAutoComplete = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+      map(term => {
+        if (term.lastIndexOf(' ') != -1) {
+          return term.substring(term.lastIndexOf(' ') + 1)
+        } else {
+          return term
+        }
+      }),
+      switchMap(term =>
+        term.length < 2 ? from([[]]) : this.searchService.autocomplete(term)
+      )
+    )
+  
+  itemSelected(event) {
+    event.preventDefault()
+    let currentSearch: string = this.searchField.value
+    let lastSpaceIndex = currentSearch.lastIndexOf(' ')
+    if (lastSpaceIndex != -1) {
+      currentSearch = currentSearch.substring(0, lastSpaceIndex + 1)
+      currentSearch += event.item + " "
+    } else {
+      currentSearch = event.item + " "
+    }
+    this.searchField.patchValue(currentSearch)
+  }
+
   search() {
     this.router.navigate(['search'], {queryParams: {query: this.searchField.value}})
   }

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -8,8 +8,8 @@
 
         <h5 class="card-title">{{document.title}}<app-tag [tag]="t" *ngFor="let t of document.tags" class="ml-1"></app-tag></h5>
         <p class="card-text">
-          <app-result-hightlight *ngIf="getDetailsAsHighlight()" class="result-content" [highlights]="getDetailHighlight()"></app-result-hightlight>
-          <span *ngIf="getDetailsAsString()" class="result-content">{{getDetailsString()}}</span>
+          <app-result-hightlight *ngIf="getDetailsAsHighlight()" class="result-content" [highlights]="getDetailsAsHighlight()"></app-result-hightlight>
+          <span *ngIf="getDetailsAsString()" class="result-content">{{getDetailsAsString()}}</span>
         </p>
 
 

src-ui/src/app/services/rest/abstract-paperless-service.ts

@@ -14,10 +14,10 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
     let url = `${this.baseUrl}${this.resourceName}/`
     if (id) {
       url += `${id}/`
+    }
     if (action) {
       url += `${action}/`
     }
-    }
     return url
   }
 

src-ui/src/app/services/rest/search.service.ts

@@ -34,4 +34,8 @@ export class SearchService {
   search(query: string): Observable<SearchResult[]> {
     return this.http.get<SearchResult[]>(`${environment.apiBaseUrl}search/`, {params: new HttpParams().set('query', query)})
   }
+
+  autocomplete(term: string): Observable<string[]> {
+    return this.http.get<string[]>(`${environment.apiBaseUrl}search/autocomplete/`, {params: new HttpParams().set('term', term)})
+  }
 }