使用angularfire2和firestore创建自动完成搜索? [英] Creating an auto complete search using angularfire2 and firestore?

问题描述

我正在尝试为我的Web应用程序构建一个简单的搜索功能. 有关于如何使用实时数据库创建文件的文档.

要在 firestore上运行此功能，我需要进行哪些更改?

本教程摘自此处 https://angularfirebase. com/lessons/autocomplete-search-with-angular4-and-firebase/

它也有一个不错的视频:)

这是通过实时数据库实现的方法:

#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
      }
    });
  }
}

自动完成搜索组件

 <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")
  }
}

解决方案

与Firestore几乎相同.

这是我刚刚编写的经过测试的有效解决方案:

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>

如果您需要更复杂的搜索，则可以使用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屋！