Contrib > Lookup Component (Part 2) > Autocomplete component

package.json

@@ -54,8 +54,8 @@
     "@angular/platform-browser": "4.3.6",
     "@angular/platform-browser-dynamic": "4.3.6",
     "@angular/router": "4.3.6",
-    "@blackbaud/skyux": "2.3.2",
-    "@blackbaud/skyux-builder": "1.7.1",
+    "@blackbaud/skyux": "2.8.0",
+    "@blackbaud/skyux-builder": "1.10.0",
     "@blackbaud/skyux-design-tokens": "0.0.8",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",

skyux-spa-visual-tests/package.json

@@ -19,8 +19,8 @@
   "author": "Blackbaud",
   "license": "ISC",
   "devDependencies": {
-    "@blackbaud/skyux": "2.3.2",
-    "@blackbaud/skyux-builder": "1.6.2",
+    "@blackbaud/skyux": "2.8.0",
+    "@blackbaud/skyux-builder": "1.10.0",
     "pix-diff": "2.0.0",
     "browserstack-local": "1.3.0"
   },

skyux-spa-visual-tests/src/app/autocomplete/autocomplete-visual.component.html

@@ -0,0 +1,10 @@
+<div id="screenshot-autocomplete">
+  <label for="favorite-color">Favorite color</label>
+  <sky-autocomplete
+    [data]="data">
+    <input
+      id="favorite-color"
+      skyAutocomplete
+      type="text">
+  </sky-autocomplete>
+</div>

skyux-spa-visual-tests/src/app/autocomplete/autocomplete-visual.component.ts

@@ -0,0 +1,23 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'autocomplete-visual',
+  templateUrl: './autocomplete-visual.component.html'
+})
+export class AutocompleteVisualComponent {
+  public data: any[] = [
+    { name: 'Red' },
+    { name: 'Blue' },
+    { name: 'Green' },
+    { name: 'Orange' },
+    { name: 'Pink' },
+    { name: 'Purple' },
+    { name: 'Yellow' },
+    { name: 'Brown' },
+    { name: 'Turquoise' },
+    { name: 'White' },
+    { name: 'Black' }
+  ];
+}

skyux-spa-visual-tests/src/app/autocomplete/autocomplete.visual-spec.ts

@@ -0,0 +1,54 @@
+import {
+  browser,
+  by,
+  element
+} from 'protractor';
+
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+
+describe('Autocomplete', () => {
+  it('should match previous alert screenshot', () => {
+    return SkyVisualTest
+      .setupTest('autocomplete')
+      .then(() => {
+        const input = element(by.css('input'));
+        input.value = 'r';
+        input.click();
+        browser.actions().sendKeys('r').perform();
+
+        browser.wait(() => {
+          return browser.isElementPresent(
+            element(by.css('.sky-dropdown-item'))
+          );
+        });
+
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'autocomplete',
+          selector: '#screenshot-autocomplete'
+        });
+      });
+  });
+
+  it('should match previous alert screenshot on small screens', () => {
+    return SkyVisualTest
+      .setupTest('autocomplete', 480)
+      .then(() => {
+
+        const input = element(by.css('input'));
+        input.value = 'r';
+        input.click();
+        browser.actions().sendKeys('r').perform();
+
+        browser.wait(() => {
+          return browser.isElementPresent(
+            element(by.css('.sky-dropdown-item'))
+          );
+        });
+
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'autocomplete',
+          selector: '#screenshot-autocomplete'
+        });
+      });
+  });
+});

skyux-spa-visual-tests/src/app/autocomplete/index.html

@@ -0,0 +1 @@
+<autocomplete-visual></autocomplete-visual>

src/core.ts

@@ -12,10 +12,10 @@ import { SKY_FLYOUT_PROVIDERS } from './modules/flyout';
 import { SKY_MODAL_PROVIDERS } from './modules/modal';
 import { SKY_WAIT_PROVIDERS } from './modules/wait';
 
+import { SkyActionButtonModule } from './modules/action-button';
 import { SkyAlertModule } from './modules/alert';
-import { SkyNumericModule } from './modules/numeric';
 import { SkyAvatarModule } from './modules/avatar';
-import { SkyActionButtonModule } from './modules/action-button';
+import { SkyAutocompleteModule } from './modules/autocomplete';
 import { SkyCardModule } from './modules/card';
 import { SkyCheckboxModule } from './modules/checkbox';
 import { SkyChevronModule } from './modules/chevron';
@@ -48,6 +48,7 @@ import { SkyListViewGridModule } from './modules/list-view-grid';
 import { SkyMediaQueryModule } from './modules/media-queries';
 import { SkyModalModule } from './modules/modal';
 import { SkyNavbarModule } from './modules/navbar';
+import { SkyNumericModule } from './modules/numeric';
 import { SkyPageSummaryModule } from './modules/page-summary';
 import { SkyPagingModule } from './modules/paging';
 import { SkyPopoverModule } from './modules/popover';
@@ -69,10 +70,10 @@ import { SkyWaitModule } from './modules/wait';
 
 @NgModule({
   exports: [
+    SkyActionButtonModule,
     SkyAlertModule,
-    SkyNumericModule,
+    SkyAutocompleteModule,
     SkyAvatarModule,
-    SkyActionButtonModule,
     SkyCardModule,
     SkyCheckboxModule,
     SkyChevronModule,
@@ -104,6 +105,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyMediaQueryModule,
     SkyModalModule,
     SkyNavbarModule,
+    SkyNumericModule,
     SkyPageSummaryModule,
     SkyPagingModule,
     SkyPopoverModule,
@@ -128,7 +130,7 @@ import { SkyWaitModule } from './modules/wait';
 export class SkyModule { }
 
 export * from './modules/alert';
-export * from './modules/numeric';
+export * from './modules/autocomplete';
 export * from './modules/avatar';
 export * from './modules/action-button';
 export * from './modules/card';
@@ -164,6 +166,7 @@ export * from './modules/list-view-grid';
 export * from './modules/modal';
 export * from './modules/media-queries';
 export * from './modules/navbar';
+export * from './modules/numeric';
 export * from './modules/page-summary';
 export * from './modules/paging';
 export * from './modules/popover';

src/demo.ts

@@ -1,12 +1,24 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {
+  NgModule
+} from '@angular/core';
+
+import {
+  CommonModule
+} from '@angular/common';
 
-import { SkyModule } from './core';
+import {
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+
+import {
+  SkyModule
+} from './core';
 
 import {
   SkyActionButtonDemoComponent,
   SkyAlertDemoComponent,
+  SkyAutocompleteDemoComponent,
   SkyAvatarDemoComponent,
   SkyCardDemoComponent,
   SkyCheckboxDemoComponent,
@@ -81,6 +93,7 @@ import {
 const components = [
   SkyActionButtonDemoComponent,
   SkyAlertDemoComponent,
+  SkyAutocompleteDemoComponent,
   SkyAvatarDemoComponent,
   SkyCardDemoComponent,
   SkyCheckboxDemoComponent,
@@ -154,6 +167,7 @@ const components = [
   imports: [
     CommonModule,
     FormsModule,
+    ReactiveFormsModule,
     SkyModule
   ],
   exports: components,