引入 typeahead

app/lobby.component.html

@@ -3,7 +3,7 @@
     <nav id="apps" *ngIf="apps" class="bg-faded sidebar scroll">
         <div id="search" class="input-group">
             <i class="fa fa-search input-group-addon search" id="basic-addon1"></i>
-            <input type="text" class="form-control search" placeholder="搜索游戏" aria-describedby="basic-addon1">
+            <input #search id="search-input" type="text" class="form-control search" placeholder="搜索游戏" aria-describedby="basic-addon1">
         </div>
 
 

app/lobby.component.ts

 /**
  * Created by zh99998 on 16/9/2.
  */
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ChangeDetectorRef, ElementRef, ViewChild} from '@angular/core';
 import {AppsService} from './apps.service';
 import {LoginService} from './login.service';
 import {App, Category} from './app';
 import {shell} from 'electron';
 import {SettingsService} from './settings.sevices';
+import 'typeahead.js';
+// import Options = Twitter.Typeahead.Options;
 
 @Component({
     moduleId: module.id,
@@ -23,7 +25,11 @@ export class LobbyComponent implements OnInit {
     resizing: HTMLElement | undefined;
     offset: number;
 
-    constructor (private appsService: AppsService, private loginService: LoginService, private settingsService: SettingsService) {
+    @ViewChild('search')
+    search: ElementRef;
+
+    constructor (private appsService: AppsService, private loginService: LoginService,
+                 private settingsService: SettingsService, private ref: ChangeDetectorRef) {
     }
 
     async ngOnInit () {
@@ -42,6 +48,23 @@ export class LobbyComponent implements OnInit {
                 window.close();
             }
         }
+        this.ref.detectChanges();
+
+        // $(this.search.nativeElement).typeahead(<any>{
+        //     minLength: 1,
+        //     highlight: true
+        // }, {
+        //     name: 'apps',
+        //     source: (query, syncResults) => {
+        //         query = query.toLowerCase();
+        //         let result = Array.from(this.apps.values())
+        //             .filter((app: App) => [Category.game, Category.music, Category.book].includes(app.category))
+        //             .filter((app: App) => app.id.includes(query) || app.name.toLowerCase().includes(query))
+        //             .map((app: App) => app.name);
+        //         console.log(result);
+        //         syncResults(result);
+        //     }
+        // });
 
         document.addEventListener('mousemove', (event: MouseEvent) => {
             if (!this.resizing) {

package.json

@@ -28,6 +28,7 @@
     "@types/bootstrap": "latest",
     "@types/jquery": "latest",
     "@types/tether": "latest",
+    "@types/typeahead": "latest",
     "angular-in-memory-web-api": "latest",
     "aria2": "latest",
     "bootstrap": "next",
@@ -48,6 +49,7 @@
     "systemjs": "mycard/systemjs#mycard",
     "systemjs-plugin-text": "latest",
     "tether": "latest",
+    "typeahead.js": "latest",
     "vue": "latest",
     "zone.js": "latest"
   },

systemjs.config.js

@@ -77,7 +77,8 @@ System.config({
 
         'jquery': '@node/jquery',
         'tether': '@node/tether',
-        'bootstrap': '@node/bootstrap'
+        'bootstrap': '@node/bootstrap',
+        'typeahead.js': '@node/typeahead.js'
     },
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {