inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Search-as-you-type drop-down should disappear when input focus is lost

Browse Source 
Refs #173
This commit is contained in:
Will Abson 2016-06-09 16:17:52 +01:00
parent 914ad910b7
commit 417e0edd44
3 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts
View File

@ -42,6 +42,9 @@ declare let __moduleName: string;
height: 32px; height: 32px;
padding: 8px; padding: 8px;
text-align: left; text-align: left;
}
:host.active.valid {
display: block;
}` }`
], ],
templateUrl: './alfresco-search-autocomplete.component.html', templateUrl: './alfresco-search-autocomplete.component.html',
@ -57,6 +60,9 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
errorMessage; errorMessage;
@Input()
ngClass: any;
route: any[] = []; route: any[] = [];
constructor( constructor(
@ -65,18 +71,13 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
private el: ElementRef, private el: ElementRef,
private renderer: Renderer private renderer: Renderer
) { ) {
console.log('Autocomplete constructor');
translate.addTranslationFolder('node_modules/ng2-alfresco-search'); translate.addTranslationFolder('node_modules/ng2-alfresco-search');
this.results = null; this.results = null;
} }
ngOnChanges(changes) { ngOnChanges(changes) {
console.log('Autocomplete changes'); if (changes.searchTerm) {
if (this.searchTerm.length >= 3) {
this.displaySearchResults(this.searchTerm); this.displaySearchResults(this.searchTerm);
this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
} else {
this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
} }
} }
@ -85,7 +86,7 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
* @param searchTerm Search query entered by user * @param searchTerm Search query entered by user
*/ */
displaySearchResults(searchTerm) { displaySearchResults(searchTerm) {
if (searchTerm !== null) { if (searchTerm !== null && searchTerm !== '') {
this._alfrescoService this._alfrescoService
.getLiveSearchResults(searchTerm) .getLiveSearchResults(searchTerm)
.subscribe( .subscribe(

5
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
View File

@ -4,9 +4,10 @@
<i class="material-icons">search</i> <i class="material-icons">search</i>
</label> </label>
<div [class]="getTextFieldHolderClassName()"> <div [class]="getTextFieldHolderClassName()">
<input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()" id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm"> <input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()"
id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus()" (blur)="onBlur()">
<label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label> <label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
</div> </div>
</div> </div>
</form> </form>
<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm"></alfresco-search-autocomplete> <alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"></alfresco-search-autocomplete>

30
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
View File

@ -56,6 +56,10 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
@Input() @Input()
autocompleteSearchTerm = ''; autocompleteSearchTerm = '';
searchActive = false;
searchValid = false;
constructor(private translate: AlfrescoTranslationService) { constructor(private translate: AlfrescoTranslationService) {
this.searchControl = new Control( this.searchControl = new Control(
@ -63,11 +67,13 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
Validators.compose([Validators.required, Validators.minLength(3)]) Validators.compose([Validators.required, Validators.minLength(3)])
); );
this.searchControl.valueChanges.debounceTime(400).distinctUntilChanged().subscribe( this.searchControl.valueChanges.map(value => this.searchControl.valid ? value : '')
(value: string) => { .debounceTime(400).distinctUntilChanged().subscribe(
this.autocompleteSearchTerm = value; (value: string) => {
} this.autocompleteSearchTerm = value;
); this.searchValid = this.searchControl.valid;
}
);
translate.addTranslationFolder('node_modules/ng2-alfresco-search'); translate.addTranslationFolder('node_modules/ng2-alfresco-search');
} }
@ -105,4 +111,18 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
} }
} }
onFocus(event) {
if (event) {
event.preventDefault();
}
this.searchActive = true;
}
onBlur(event) {
if (event) {
event.preventDefault();
}
this.searchActive = false;
}
} }