自动填充搜索组件

Question

嘿我试图为我的网络应用程序构建一个简单的搜索功能。有关于如何使用实时数据库创建它的文档。

我需要做些哪些更改才能在 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")
  }

}

Answer 1

与Firestore几乎相同。

这里是我刚写的工作和测试解决方案：

<强> search.ts

$ echo "I am the string" | bash bashxor.sh xyz
original: I am the string
encoded : 31791b15790e101c7a0b0d0811171d78
decoded : I am the string

<强> search.html

import MessageUI
class ProfileVC: UsernameVC, MFMailComposeViewControllerDelegate {
    @IBOutlet weak var emailButtonLabel: UIButton!
    @IBOutlet weak var attenDescrip: UITextView!

    override func viewDidLoad() {
        //super.viewDidLoad()
    }

    @IBAction func emailPressed(_ sender: Any) {
        print("email pressed")
        let mailCOmposevViewController = configureMailController()
        if MFMailComposeViewController.canSendMail(){
            self.present(mailCOmposevViewController, animated: true, completion: nil)
        }
        else {
            showMailError()
        }
    }

    func configureMailController() -> MFMailComposeViewController {
        let mailCOmposerVC = MFMailComposeViewController()
        mailCOmposerVC.mailComposeDelegate = self
        mailCOmposerVC.setToRecipients(["first@gmail.com"])
        mailCOmposerVC.setSubject("Application")
        mailCOmposerVC.setMessageBody("app.", isHTML: false)
        return mailCOmposerVC
    }

    func showMailError() {
        let sendMailErrorAlert = UIAlertController(title: "Could not send email", message: "Please set up your email account", preferredStyle: .alert)
        let dismiss = UIAlertAction(title: "Ok", style: .default, handler: nil)
        sendMailErrorAlert.addAction(dismiss)
        self.present(sendMailErrorAlert, animated: true, completion: nil)
    }

    func mailComposeController(_ controller: MFMailComposeViewController, didFinishWith result: MFMailComposeResult, error: Error?) {
        controller.dismiss(animated: true, completion: nil)
    }
}

如果您需要更复杂的搜索，可以使用Algolia：

要启用Cloud Firestore数据的全文搜索，请使用Algolia等第三方搜索服务。考虑一个笔记记录应用程序，其中每个笔记都是一个文档：

您可以在official firestore documentation

上找到更多信息

Answer 2

您将面临Firestore的问题是延迟问题。不确定这是因为它仍处于测试阶段，但读取的延迟令人担忧地高。

使用angularfire2和firestore创建自动完成搜索？

自动填充搜索组件

TS

2 个答案: