Creating an auto complete search using angularfire2 and firestore?
It is pretty much the same with Firestore.
Here the working and tested solution i just wrote :
search.ts
import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
@Component({
selector: 'search',
templateUrl: 'search.html'
})
export class SearchComponent {
searchValue: string = "";
results: any;
constructor(public afs: AngularFirestore) {
}
search() {
let self = this;
self.results = self.afs.collection(`users`, ref => ref
.orderBy("username")
.startAt(self.searchValue.toLowerCase())
.endAt(self.searchValue.toLowerCase()+"\uf8ff")
.limit(10))
.valueChanges();
}
}
search.html
<div>
<input type="text" (keyup)="search()" [(ngModel)]="searchValue">
<div class="search-results">
<div class="search-result" *ngFor="let result of results | async">
{{ result.username }}
</div>
</div>
</div>
If you need a more complex search, you could use Algolia :
To enable full text search of your Cloud Firestore data, use a third-party search service like Algolia. Consider a note-taking app where each note is a document:
You'll find more information on the official firestore documentation