Implementing a case-insensitive comparison

[zmbq]

I wanted to use a case-insensitive auto-complete. Looking at the code I saw it's possible to pass a function as a source, so I did something like this:

<input auto-complete [source]="myFilter">

The filter function looks something like this:

myFilter(prefix: string): Observable<string> {
  return Observable.from(this.options.filter((s)=>s.toLowerCase().startsWith(prefix.toLowerCase()));
}

Current behavior

myFilter is called, however it's this is bound to the AutoComplete component and not to my object, so this.options is undefined and nothing worked

Expected/desired behavior

I would expect this to be bound to my own object.

Other information

This is probably due to the fact that source is an input element and not an output element of the component. You can see that I bind it with [source] and not (source) (otherwise the component fails earlier, saying source is undefined).

[kevinhoelscher]

@zmbq You should be able to achieve what you want if you define it this way:

myFilter = ((prefix: string): Observable<string> => {
  return Observable.from(this.options.filter((s)=>s.toLowerCase().startsWith(prefix.toLowerCase()));
}).bind(this);

I did something very similar in one of my projects.