Support remote load on IgxAutocompleteModule

[grosch-intl]

Is your feature request related to a problem? Please describe.

When using an igx-combo or an input field, it's pretty common to want to use autocompletion. However, at least in my case, it's rare that I already have the data. As they type it hits a remote server to pull the next 50ish entries or so that match the text. That's very complicated to setup today.

Describe the solution you'd like

Some type of (onNeedAutocomplete)="remoteServerLookup($event) ability where I then simply do something like:

remoteServerLookup(event: AutocompleteEvent): Observable<Employee[]> {
    return this.myService.filteredValues(event.text)
}

Describe alternatives you've considered

I'm doing it today via a pipe that calls the service, but those pipes then become repetitive and it's confusing later when looking back as to why I need a pipe and how it's actually triggering the lookup. It also then adds complexity because now I'm having to mix reactive and template-based forms. The input/combo suddenly has to use an ngModelChange for validity and an [(ngModel)] to drive the pipe, and then tie that back to the reactive form.

It's all doable, it's just really messy.

Additional context

We have to tie an ngModelChange to something like this method. When I look at it later I'm wondering what that pipeString is for. That's what triggers the pipe value.

    onTextFieldChanged(event: string): void {
        // If they type into the field, then they didn't pick from the drop-down, that means it's just not valid.
        this.value = null
        this.onChange?.(null)
        this.onTouched?.()
        this.pipeString = event
    }

Then we end up doing some type of pipe, which might be getting a string back if it's data from the server, but if I had a selected thing already, then it's probably an actual object.

    transform(_collection: Observable<Employee[]>, input: string | Employee | undefined): Observable<Employee[]> {
        if (!input)
            return of([])

        if (typeof input !== 'string')
            return of([input])

        return of(input).pipe(
            debounceTime(500),
            distinctUntilChanged(),
            switchMap(term => this.service.find(term)),
            catchError((err: unknown) => {
                console.error(err as HttpErrorResponse)
                return of([])
            })
        )
    }

[Lipata]

@grosch-intl, here is a demo with igx-combo with remote filtering. It is the demo shown in the topic for Remote combo binding, however, there is a bug in the sample that we need to fix and currently I have fixed in the StackBlitz demo above.

If you talk about ig-autocomplete component, which uses igx-drop-down component for its list, you can follow the virtual drop down topic.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.