valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.52k stars 1.69k forks source link

docs typeahead: example of local + async data together #3654

Open robvaneck opened 6 years ago

robvaneck commented 6 years ago

Hi,

[x] doc addition

Could you add an example in the docs how we can use Typahead with locally stored values in (an array) and async data together?

Sometimes request haven't been saved on the server (yet) but have been used locally, so I want to store those locally.. so Typeahead can use them... but merge these local results with the server results. Since RxJS isn't that friendly for beginners, I really need an example.

Thanks

robvaneck commented 6 years ago

I've got this working, and would like to share my code


ngOnInit() {

    this.dataSource = Observable.create((observer: any) => {
      let search: string = this.controlContainer.control.get('name').value;
      let remote = this.someService.search(search);

      let query = new RegExp(search, 'ig');
      let locale = Observable.of(this.someService.localValues.filter(x => query.test(x.name)));

      Observable
        .forkJoin([remote, locale], (remote, locale) =>{
          return remote.concat(locale);
        })
        .subscribe(results => {
          observer.next(results);
        });
    });
  }

I also store local values with a subscription on the Typeahead field.. if everything is valid.. i clear the old values from the service (if they match) and push new value.