xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

imlementing search autocomplete list click

Browse Source
This commit is contained in:
Braun Patrik 2016-05-10 10:59:12 +02:00
parent deefd64d11
commit 4caa499faf
4 changed files with 65 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/gallery/gallery.service.ts
View File

@ -34,6 +34,7 @@ export class GalleryService {
//TODO: cache
public search(text:string):Promise<Message<ContentWrapper>> {
clearTimeout(this.searchId);
if (text === null || text === '') {
return Promise.resolve(new Message(null, null));
}

13
frontend/app/gallery/search/search.gallery.component.css
View File

@ -7,10 +7,21 @@
border: 1px solid #ccc;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding:12px;
padding-left: 3px;
padding-right: 3px;
padding-top: 5px;
padding-bottom: 5px;
}
.autocomplete-item{
cursor: pointer;
padding-left: 3px;
padding-right: 3px;
border-radius: 2px;
}
.autocomplete-item:hover {
background-color: #eaeaea;
}
#srch-term {

5
frontend/app/gallery/search/search.gallery.component.html
View File

@ -2,11 +2,12 @@
<form class="navbar-form" role="search" #SearchForm="ngForm">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" (keyup)="onSearchChange($event)"
(blur)="onFocusLost($event)" [(ngModel)]="searchText" #name="ngForm" ngControl="search"
(blur)="onFocusLost($event)" (focus)="onFocus($evnet)" [(ngModel)]="searchText" #name="ngForm"
ngControl="search"
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">
<div class="autocomplete-item" *ngFor="let item of autoCompleteItems" (mousedown)="search(item)">
{{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}}
</div>
</div>

81
frontend/app/gallery/search/search.gallery.component.ts
View File

@ -23,7 +23,44 @@ export class GallerySearchComponent {
}
onSearchChange(event:KeyboardEvent) {
let searchText = (<HTMLInputElement>event.target).value;
this.autocomplete(searchText);
this._galleryService.instantSearch(searchText);
}
public onSearch() {
this._galleryService.search(this.searchText);
}
public search(item:AutoCompleteItem) {
console.log("clicked");
this.searchText = item.text;
this.onSearch();
}
private showSuggestions(suggestions:Array<AutoCompleteItem>, searchText:string) {
this.emptyAutoComplete();
suggestions.forEach((item)=> {
let renderItem = new AutoCompleteRenderItem(item.text, searchText);
this.autoCompleteItems.push(renderItem);
});
}
public onFocusLost(event) {
this.autoCompleteItems = [];
}
public onFocus(event) {
this.autocomplete(this.searchText);
}
private emptyAutoComplete() {
this.autoCompleteItems = [];
}
private autocomplete(searchText:string) {
if (searchText.trim().length > 0) {
this._autoCompleteService.autoComplete(searchText).then((message:Message<Array<AutoCompleteItem>>) => {
if (message.error) {
@ -36,44 +73,24 @@ export class GallerySearchComponent {
} else {
this.emptyAutoComplete();
}
this._galleryService.instantSearch(searchText);
}
public onSearch() {
this._galleryService.search(this.searchText);
}
private showSuggestions(suggestions:Array<AutoCompleteItem>, searchText:string) {
this.emptyAutoComplete();
suggestions.forEach((item)=> {
let preIndex = item.text.toLowerCase().indexOf(searchText.toLowerCase());
let renderItem = new AutoCompleteRenderItem();
if (preIndex > -1) {
renderItem.preText = item.text.substring(0, preIndex);
renderItem.highLightText = item.text.substring(preIndex, preIndex + searchText.length);
renderItem.postText = item.text.substring(preIndex + searchText.length);
} else {
renderItem.postText = item.text;
}
this.autoCompleteItems.push(renderItem);
});
}
public onFocusLost(event) {
this.autoCompleteItems = [];
}
private emptyAutoComplete() {
this.autoCompleteItems = [];
}
}
class AutoCompleteRenderItem {
constructor(public preText:string = "", public highLightText:string = "", public postText:string = "") {
public preText:string = "";
public highLightText:string = "";
public postText:string = "";
constructor(public text:string, searchText:string) {
let preIndex = text.toLowerCase().indexOf(searchText.toLowerCase());
if (preIndex > -1) {
this.preText = text.substring(0, preIndex);
this.highLightText = text.substring(preIndex, preIndex + searchText.length);
this.postText = text.substring(preIndex + searchText.length);
} else {
this.postText = text;
}
}
}