使用Angularfire2和Firestore自动完成

Question

Does someone know how to make an autocomplete function with Angularfire2 and Firestore please?

I mean, you have an input, and when you start to write, you make a query and you get desired results in response.

I have no idea how to do that. I had some lame attempts with query.where but it didn't go well.

For now I just get all the results on load and filter the data, but I'm really not happy with that solution.

Any help would be appreciated. Better yet, with some explanation, because I'm lost in the whole angularfire and firestore thing.

Answer 1

I think this can be achieved using Behavior subject and switch map operator.

Steps: 1. define a behavior subject with null as initial value. 2. switchMap this behavioural subject to another observalble that actually does the data fetch from firestore. 3. Define a debounce time is needed to wait for a particular time as the user types into the Input.

refer the offical github example for angularfire2 as well. I hope this will work for you.

 inputFilter$ = new BehaviorSubject(null);
    fireStoreResult$ = inputFiler$.swithMap((inputText) => {
      afs.collection('items', ref => {
        let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
        if (inputText) { query = query.where('someParameter', '==', inputText) };
        return query;
      }).valueChanges()
    })