Skip to content

B
business-java
Commit c3cba8c7 authored by prumde's avatar prumde
Browse files
Options

Added md-autocomplete 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174431 ce508802-f39f-4f6c-b175-0d175dae99d5
parent c28b8337
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 11 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.html
View file @ c3cba8c7
<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
View file @ c3cba8c7
......@@ -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();
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment