Added md-autocomplete

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174431 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.html

 <form *ngIf="headerState === 'relative'" id="search-form" [@searchInputTrans]="compFadeState">
 	<span class="search-page-border">
-	<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms" name="search-terms" /> 
+	<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms" name="search-terms" [formControl]="stateCtrl" [mdAutocomplete]="auto" /> 
+	<md-autocomplete #auto="mdAutocomplete">
+		<md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
+		</md-option>
+	</md-autocomplete>
+	    	
  	<span class="search-which-border">
 		<div class="locate-me">{{ userLocation ? userLocation.city : 'Locate Me' }}</div>
 		<div class="locate-handle" (click)="loacteMe();" ></div> 
@@ -11,23 +16,36 @@
 </form>
 <div *ngIf="headerState === 'fixed'" class="sb-search">
 	<form>
-		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms-fixed" value="" name="search" id="search" /> 
+		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms-fixed" value="" name="search" id="search"  [formControl]="stateCtrl" [mdAutocomplete]="auto" /> 
+		
+		<md-autocomplete #auto="mdAutocomplete">
+		   <md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
+		   </md-option>
+	    </md-autocomplete>
+			
 		<div md-ripple class="location" (click)="loacteMe();">
 			<img class="location-img-32" src="location_32_32.svg"/> 
 			<span class="location-text">{{ userLocation ? userLocation.address : 'Locate Me' }}</span>
 			<i class="material-icons location-arrow">keyboard_arrow_down</i>
 		</div>
-		<input class="sb-search-submit" type="submit" (click)="search(myInput.value)">		
+    	<input class="sb-search-submit" type="submit" (click)="search(myInput.value)">	
+				
 	</form>
 </div>
 
 <div  *ngIf="headerState === 'mobile'" class="sb-search-mobile">
 	<form>
 		<div class="search-mobile">
-			<md-input-container floatPlaceholder="never" class="search-full-width">
-			    <input #myInput type="tel" mdInput placeholder="Search Food, Tour, Events and More..." value="" name="search" id="search">
+		  <md-input-container floatPlaceholder="never" class="search-full-width">
+			    <input #myInput type="tel" mdInput placeholder="Search Food, Tour, Events and More..." value="" name="search" id="search" [formControl]="stateCtrl" [mdAutocomplete]="auto">
 			    <i mdSuffix class="material-icons mobile-search" (click)="search(myInput.value)">search</i>
-		  	</md-input-container>
+		  </md-input-container>
+		  	
+		  <md-autocomplete #auto="mdAutocomplete">
+		   <md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
+		   </md-option>
+	      </md-autocomplete>
+
 <!-- 		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="back-term-fixed" value="" name="search" id="search" />  -->
 		</div>
 		<input class="sb-search-submit" type="submit" (click)="search(myInput.value) ">	

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.ts

@@ -6,6 +6,7 @@ import { SearchService } from './ecm-search-result/search.service';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
+import { FormControl } from '@angular/forms';
 
 import { EcmStoreModel } from '../ecm-store/ecm-store.model';
 
@@ -38,14 +39,31 @@ export class ECMSearchComponent implements OnInit {
   @Input('headerState') headerState: string = 'relative';
   @ViewChild('myInput') searchBar;
   @Output() closePanel = new EventEmitter();
-
+  
+  stateCtrl = new FormControl();
+  options = ['Food', 'Handicrafts', 'Crafts'];
+  filteredOptions;
+  
   public storeUserLocation :  Observable<EcmLocation>;
   public userLocation : EcmLocation;
 
   search_key;
  
   selectedPlace = 'Mumbai';
-  constructor(private locationService: EcmLocationService, private search_service: SearchService, private router: Router, private store: Store<EcmStoreModel>) {}
+  constructor(private locationService: EcmLocationService, private search_service: SearchService, private router: Router, private store: Store<EcmStoreModel>) 
+  {
+      this.stateCtrl.valueChanges.debounceTime(100).subscribe((val: any) => {
+          console.log("Selected Value[" +val+ "]");
+          let trimmedVal = val.trim().replace(/<\/?[^>]+(>|$)/g, "");
+          
+          if(trimmedVal)
+          {    
+              this.search_service.getSuggestions(trimmedVal).subscribe(data => {
+                  this.filteredOptions = data.fuzzySuggester.trimmedVal.suggestions;
+              });
+          }
+       });
+  }
   ngOnInit() {
       //this.selectedCity = localStorage.getItem('city');
       this.search_key = this.search_service.getSearch(); 
@@ -72,10 +90,12 @@ export class ECMSearchComponent implements OnInit {
   }
   
   search(value) { 
-  	 if(value.trim())
+     let trimmedVal = value.trim().replace(/<\/?[^>]+(>|$)/g, ""); 
+     console.log('Search Funtion Called ['+trimmedVal+']');
+  	 if(value)
      {
-        this.search_service.setSearch(value.trim());
-        this.router.navigate(['/search',value.trim()]);
+        this.search_service.setSearch(trimmedVal);
+        this.router.navigate(['/search',trimmedVal]);
   	 } 
   	 this.closePanel.emit();
   }