Go Select Async Items

projects/go-lib/src/lib/components/go-select/go-select.component.html

@@ -14,6 +14,7 @@
   [loading]="loading"
   [multiple]="multiple"
   [formControl]="control"
+  [typeahead]="typeahead"
   [placeholder]="placeholder">
 </ng-select>
 

projects/go-lib/src/lib/components/go-select/go-select.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { Subject } from 'rxjs';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -21,6 +22,7 @@ export class GoSelectComponent implements OnInit {
   @Input() loading: boolean = false;
   @Input() multiple: boolean = false;
   @Input() placeholder: string;
+  @Input() typeahead?: Subject<string>;
   @Input() theme: 'light' | 'dark' = 'light';
 
   ngOnInit(): void {

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html

@@ -344,4 +344,41 @@ <h2 class="go-heading-6 go-heading--underlined">Code</h2>
       </div>
     </ng-container>
   </go-card>
+  <go-card id="form-select-loading" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Component Typeahead</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        Sometimes we may want to use typeahead functionality in order to get the results from the server based
+        on a users input. The <code class="code-block--inline">@Input() typeahead?: Subject&lt;string&gt;;</code> binding.
+        can be used to pass a typeahead string through to do server side searching using an observable with rxjs.
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">View</h2>
+          <go-select
+            bindLabel="name"
+            bindValue="value"
+            [control]="select11"
+            [items]="options$ | async"
+            [multiple]="true"
+            label="Your Input"
+            [typeahead]="itemInput"
+          ></go-select>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code
+            [highlight]="select11Code"
+            class="code-block--no-bottom-margin"
+          ></code>
+          <code
+            [highlight]="select11ComponentCode"
+            class="code-block--no-bottom-margin"
+          ></code>
+        </div>
+      </div>
+    </ng-container>
+  </go-card>
 </section>

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts

@@ -2,11 +2,16 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { GoModalService, GoSelectComponent } from 'projects/go-lib/src/public_api';
 import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service';
+import { debounceTime, map } from 'rxjs/operators';
+import { concat, of, Subject } from 'rxjs';
 
 @Component({
   templateUrl: './select-docs.component.html'
 })
 export class SelectDocsComponent implements OnInit {
+  itemInput: Subject<string> = new Subject<string>();
+  options$: any;
+
   items: any = [
     { value: 1, name: 'Reeses' },
     { value: 2, name: 'Mints' }
@@ -22,6 +27,7 @@ export class SelectDocsComponent implements OnInit {
   select8: FormControl = new FormControl('');
   select9: FormControl = new FormControl('');
   select10: FormControl = new FormControl('');
+  select11: FormControl = new FormControl('');
 
   hints: Array<string> = ['please select you favorite candy'];
 
@@ -157,6 +163,31 @@ export class SelectDocsComponent implements OnInit {
   }
   `;
 
+  select11Code: string = `
+  <go-select
+    bindLabel="name"
+    bindValue="value"
+    [control]="select"
+    [items]="options$ | async"
+    [multiple]="true"
+    label="Your Input"
+    [typeahead]="itemInput"
+  ></go-select>
+  `;
+
+  select11ComponentCode: string = `
+  itemInput: Subject<string> = new Subject<string>();
+  options$: any;
+
+  this.options$ = concat(
+    of([]),
+    this.itemInput.pipe(
+      debounceTime(600), // Delay user input
+      map((input) => [input])
+    )
+  );
+  `;
+
   constructor(
     private goModalService: GoModalService,
     private subNavService: SubNavService
@@ -176,6 +207,14 @@ export class SelectDocsComponent implements OnInit {
         }
       ]);
     });
+
+    this.options$ = concat(
+      of([]),
+      this.itemInput.pipe(
+        debounceTime(600), // Delay user input
+        map((input) => [input])
+      )
+    );
   }
 
   openModal(): void {