implementing basic autocomplete for gallery

frontend/app/admin/admin.component.html

@@ -1,5 +1,5 @@
 <app-frame>
-    <div class="container">
+    <div body class="container">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <h3 class="panel-title">User management</h3>

frontend/app/frame/frame.component.html

@@ -15,7 +15,8 @@
                 <li class="active"><a [routerLink]="['Gallery',{directory: '/'}]">Gallery</a></li>
                 <li><a [routerLink]="['Admin']">Admin</a></li>
             </ul>
+            <ng-content select="[navbar]"></ng-content>
         </div><!--/.nav-collapse -->
     </div>
 </nav>
-<ng-content></ng-content>
+<ng-content select="[body]"></ng-content>

frontend/app/gallery/gallery.component.html

@@ -1,6 +1,9 @@
 <gallery-lightbox #lightbox></gallery-lightbox>
 <app-frame>
-    <div class="container" style="width: 100%; padding:0">
+    <div navbar>
+        <gallery-search></gallery-search>
+    </div>
+    <div body class="container" style="width: 100%; padding:0">
         <div *ngIf="currentDirectory" *ngFor="let directory of currentDirectory.directories">
             <gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
         </div>

frontend/app/gallery/gallery.component.ts

@@ -10,6 +10,7 @@ import {GalleryDirectoryComponent} from "./directory/directory.gallery.component
 import {GalleryGridComponent} from "./grid/grid.gallery.component";
 import {FrameComponent} from "../frame/frame.component";
 import {GalleryLightboxComponent} from "./lightbox/lightbox.gallery.component";
+import {GallerySearchComponent} from "./search/search.gallery.component";
 
 @Component({
     selector: 'gallery',
@@ -18,7 +19,8 @@ import {GalleryLightboxComponent} from "./lightbox/lightbox.gallery.component";
     directives:[GalleryGridComponent,
                 GalleryDirectoryComponent,
                 GalleryLightboxComponent,
-                FrameComponent]
+                FrameComponent,
+                GallerySearchComponent]
 })
 export class GalleryComponent implements OnInit{
 

frontend/app/gallery/search/autocomplete.service.ts

@@ -0,0 +1,22 @@
+///<reference path="../../../browser.d.ts"/>
+
+import {Injectable} from "angular2/core";
+import {Http} from "angular2/http";
+import {NetworkService} from "../../model/network/network.service";
+
+@Injectable()
+export class AutoCompleteService extends NetworkService {
+
+
+    constructor(_http:Http) {
+        super(_http);
+    }
+
+    arraytmp:Array<string> = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua &amp; Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia &amp; Herzegovina", "Botswana", "Brazil", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Cape Verde", "Cayman Islands", "Chad", "Chile", "China", "Colombia", "Congo", "Cook Islands", "Costa Rica", "Cote D Ivoire", "Croatia", "Cruise Ship", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Estonia", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "France", "French Polynesia", "French West Indies", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kuwait", "Kyrgyz Republic", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Mauritania", "Mauritius", "Mexico", "Moldova", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Namibia", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russia", "Rwanda", "Saint Pierre &amp; Miquelon", "Samoa", "San Marino", "Satellite", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "South Africa", "South Korea", "Spain", "Sri Lanka", "St Kitts &amp; Nevis", "St Lucia", "St Vincent", "St. Lucia", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor L'Este", "Togo", "Tonga", "Trinidad &amp; Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks &amp; Caicos", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "Uruguay", "Uzbekistan", "Venezuela", "Vietnam", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe"];
+
+    public autoComplete(text:string) { 
+        return this.arraytmp.filter(t => t.toLowerCase().indexOf(text.toLowerCase()) > -1).slice(0,10);
+    }
+
+
+}

frontend/app/gallery/search/search.gallery.component.css

@@ -0,0 +1,19 @@
+.autocomplete-list {
+    position: absolute;
+    left: 0;
+    top: 34px;
+    background-color:white;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding:12px;
+}
+
+.autocomplete-item{
+}
+
+#srch-term {
+    border-bottom-left-radius: 0;
+    border-bottom-width: 0;
+}

frontend/app/gallery/search/search.gallery.component.html

@@ -0,0 +1,19 @@
+<div class="col-sm-4 col-md-5 pull-right">
+    <form class="navbar-form" role="search">
+        <div class="input-group">
+                <input type="text" class="form-control" placeholder="Search" (keyup)="getSuggestions($event)"
+                       name="srch-term" id="srch-term" autocomplete="off" >
+
+                <div class="autocomplete-list" *ngIf="autoCompleteItems.length > 0" >
+                    <div class="autocomplete-item" *ngFor="let item of autoCompleteItems">
+                        {{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}}
+                    </div>
+                </div>
+
+            <div class="input-group-btn" style="display: block">
+                <button class="btn btn-default dropdown-toggle" type="button"><i class="glyphicon glyphicon-search"></i>
+                </button>
+            </div>
+        </div>
+    </form>
+</div>

frontend/app/gallery/search/search.gallery.component.ts

@@ -0,0 +1,53 @@
+///<reference path="../../../browser.d.ts"/>
+
+import {Component} from "angular2/core";
+import {AutoCompleteService} from "./autocomplete.service";
+
+@Component({
+    selector: 'gallery-search',
+    templateUrl: 'app/gallery/search/search.gallery.component.html',
+    styleUrls: ['app/gallery/search/search.gallery.component.css'],
+    providers: [AutoCompleteService]
+})
+export class GallerySearchComponent {
+ 
+    autoCompleteItems:Array<AutoCompleteItem> = [];
+    constructor(private _autoCompleteService:AutoCompleteService) {
+    }
+
+    getSuggestions(event:KeyboardEvent){ 
+        let searchText = (<HTMLInputElement>event.target).value;
+        let result = [];
+        if(searchText.length > 0) {
+            result = this._autoCompleteService.autoComplete(searchText);
+        }
+        this.showSuggestions(result,searchText);
+    }
+
+    private showSuggestions(suggestions:Array<string>,searchText:string){
+        this.autoCompleteItems = [];
+        suggestions.forEach((value)=>{
+            let preIndex = value.toLowerCase().indexOf(searchText.toLowerCase());
+            let item = new AutoCompleteItem();
+            if(preIndex > -1){
+                item.preText = value.substring(0,preIndex);
+                item.highLightText = value.substring(preIndex, preIndex + searchText.length);
+                item.postText = value.substring(preIndex + searchText.length);                
+            }else{
+                item.postText = value;
+            }
+            this.autoCompleteItems.push(item);
+        });
+    }
+
+
+
+
+}
+
+class AutoCompleteItem{
+    constructor(public preText:string = "",public  highLightText:string = "", public postText:string = ""){
+        
+    }
+}
+