使用 angularfire2 和 firestore 创建自动完整搜索?
[英] Creating an auto complete search using angularfire2 and firestore?
本文介绍了使用 angularfire2 和 firestore 创建自动完整搜索?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试为我的网络应用程序构建一个简单的搜索功能.有关于如何使用实时数据库创建它的文档.
我需要进行哪些更改才能在 firestore 上运行此功能?
本教程取自此处 https://angularfirebase.com/lessons/autocomplete-search-with-angular4-and-firebase/
它也有一个不错的视频:)
这是如何使用实时数据库:
#movies.service.ts从'@angular/core'导入{可注射};导入 { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/数据库';@Injectable()导出类 MoviesService {构造函数(私有数据库:AngularFireDatabase){}getMovies(start, end): FirebaseListObservable{return this.db.list('/电影', {询问: {orderByChild: '标题',limitToFirst: 10,startAt:开始,结束于:结束}});}}
自动完成搜索组件
电影搜索
<input type="text" (keydown)="search($event)" placeholder="search电影..." class="input"><div *ngFor="让电影的电影"><h4>{{电影?.标题}}</h4><p>{{电影?.情节}}</p>
<div *ngIf="movies?.length < 1"><小时><p>未找到结果 :(</p>
TS
import { Component, OnInit } from '@angular/core';从 '../movies.service' 导入 { MoviesService };从rxjs/主题"导入{主题}@成分({选择器:'电影搜索',templateUrl: './movie-search.component.html',styleUrls: ['./movie-search.component.scss']})导出类 MovieSearchComponent 实现 OnInit {电影;startAt = 新主题()endAt = 新主题()构造函数(私人电影服务:电影服务){}ngOnInit() {this.moviesSvc.getMovies(this.startAt, this.endAt).subscribe(电影 => this.movies = 电影)}搜索($事件){让 q = $event.target.valuethis.startAt.next(q)this.endAt.next(q+"\uf8ff")}}
解决方案
Firestore 几乎相同.
这里是我刚刚写的有效和经过测试的解决方案:
search.ts
import { Component } from '@angular/core';从 'angularfire2/firestore' 导入 { AngularFirestore };@成分({选择器:'搜索',模板网址:'search.html'})导出类 SearchComponent {搜索值:字符串=";结果:任何;构造函数(公共 afs:AngularFirestore){}搜索() {让 self = this;self.results = self.afs.collection(`users`, ref => ref.orderBy("用户名").startAt(self.searchValue.toLowerCase()).endAt(self.searchValue.toLowerCase()+"\uf8ff").limit(10)).valueChanges();}}
search.html
<input type="text" (keyup)="search()" [(ngModel)]="searchValue"><div class="search-results"><div class="search-result" *ngFor="let result of results | async">{{ result.username }}
如果您需要更复杂的搜索,可以使用 Algolia :
<块引用>
要启用对 Cloud Firestore 数据的全文搜索,请使用 Algolia 等第三方搜索服务.考虑一个笔记应用,其中每个笔记都是一个文档:
您会在官方 Firestore 文档
I'm trying to build a simple search function for my web app.
there is documentation on how to create it with real time database.
What changes do I need to make to make this work on firestore ?
this tutorial was taken from here https://angularfirebase.com/lessons/autocomplete-search-with-angular4-and-firebase/
it has a nice video as well :)
this is how to make it with real time database:
#movies.service.ts
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from '
angularfire2/database';
@Injectable()
export class MoviesService {
constructor(private db: AngularFireDatabase) { }
getMovies(start, end): FirebaseListObservable<any> {
return this.db.list('/movies', {
query: {
orderByChild: 'Title',
limitToFirst: 10,
startAt: start,
endAt: end
}
});
}
}
The Autocomplete Search Component
<h1>Movie Search</h1>
<input type="text" (keydown)="search($event)" placeholder="search
movies..." class="input">
<div *ngFor="let movie of movies">
<h4>{{movie?.Title}}</h4>
<p>
{{movie?.Plot}}
</p>
</div>
<div *ngIf="movies?.length < 1">
<hr>
<p>
No results found :(
</p>
</div>
TS
import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { Subject } from 'rxjs/Subject'
@Component({
selector: 'movie-search',
templateUrl: './movie-search.component.html',
styleUrls: ['./movie-search.component.scss']
})
export class MovieSearchComponent implements OnInit {
movies;
startAt = new Subject()
endAt = new Subject()
constructor(private moviesSvc: MoviesService) { }
ngOnInit() {
this.moviesSvc.getMovies(this.startAt, this.endAt)
.subscribe(movies => this.movies = movies)
}
search($event) {
let q = $event.target.value
this.startAt.next(q)
this.endAt.next(q+"\uf8ff")
}
}
解决方案
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
这篇关于使用 angularfire2 和 firestore 创建自动完整搜索?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!