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;
padding: 8px;
text-align: left;
}
:host.active.valid {
display: block;
}`
],
templateUrl: './alfresco-search-autocomplete.component.html',
@ -57,6 +60,9 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
errorMessage;
@Input()
ngClass: any;
route: any[] = [];
constructor(
@ -65,18 +71,13 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
private el: ElementRef,
private renderer: Renderer
) {
console.log('Autocomplete constructor');
translate.addTranslationFolder('node_modules/ng2-alfresco-search');
this.results = null;
}
ngOnChanges(changes) {
console.log('Autocomplete changes');
if (this.searchTerm.length >= 3) {
if (changes.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
*/
displaySearchResults(searchTerm) {
if (searchTerm !== null) {
if (searchTerm !== null && searchTerm !== '') {
this._alfrescoService
.getLiveSearchResults(searchTerm)
.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>
</label>
<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>
</div>
</div>
</form>
<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm"></alfresco-search-autocomplete>
<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"></alfresco-search-autocomplete>

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

@ -56,6 +56,10 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
@Input()
autocompleteSearchTerm = '';
searchActive = false;
searchValid = false;
constructor(private translate: AlfrescoTranslationService) {
this.searchControl = new Control(
@ -63,9 +67,11 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
Validators.compose([Validators.required, Validators.minLength(3)])
);
this.searchControl.valueChanges.debounceTime(400).distinctUntilChanged().subscribe(
this.searchControl.valueChanges.map(value => this.searchControl.valid ? value : '')
.debounceTime(400).distinctUntilChanged().subscribe(
(value: string) => {
this.autocompleteSearchTerm = value;
this.searchValid = this.searchControl.valid;
}
);
@ -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;
}
}