[Autocomplete] Restrict selection to given set of items

[julianobrasil]

Bug, feature request, or proposal:

Request

What is the expected behavior?

md-autocomplete could have an option to force selection. I think it's not in the design doc, but near 50% of the autocompletes I've used must had to force selection.

EDITED: When the requested "force selection" option is set to true, it could clear the input (and any bound property) if the user types something in and moves the focus to other component without selecting one of the options shown on the opened panel (if there are no sugestions, the input is also cleared on the blur event).

What is the current behavior?

EDITED: The feature is not achievable direclty from the component. In one single project I'm working on, I have about 15 md-autompletes, and 11 of them must force selection. Currently I got this feature by two steps:

1. checking (in the intput's valueChanges observable) wether the value is an object - that I save in a private result property - or a regular string - that is ignored, by clearing up the same private result property (basically the input value is an object just when I select one option from the opened panel otherwise it is just a regular string that must be ignored)

2. in the blur event I verify wether the private result property is cleared or has a value (if it's cleared, I also clear the input).

Another way to do that is comparing what was typed to what came from the async server search - but I'm not sure if either of these aproaches is the best solution not wether it's suitable to the case of a search made directly in an in-memory array instead of bringing results fom a remote server. There are too many confusing workarounds to make it do what you want. I'm worried about the future, when I eventualy have to change anything in this code - it will be very time-consuming to remember all of this. There would be much less pain if, in a year from now I could just look at the component and see something like forceSelection="true".

[crisbeto]

Could you give an example of how it would work? The menu wouldn't close unless you select something?

[julianobrasil]

@crisbeto, If the user began to type and left the input without selecting one of the options shown in the opened panel, it would clear the input (and any bound property).

[crisbeto]

Thanks, that makes a bit more sense.

[rosslavery]

Basically a hybrid between a selectbox and an autocomplete. Can be thought of as:

• A select with a search/filter feature or..
• An autocomplete that only allows values from the suggestion box.

[fxck]

I've hacked around this by checking whether the model value is an object (given that my items are actually objects) on blur, if it's a string, it means autocomplete was blurred without selecting an option (the value will be a string). But it's nowhere near ideal, it requires setTimeouts, as the value immediately after blur will still be a string even if you actually click on an item, as it needs some time to propagate.

[julianobrasil]

@fxck I had forgotten to mention the setTimouts. I had to use them too in the blur event handler in some cases (where there was a group of dependent mdSelects that should keep their values if they were related to the new option selected from the autocomplete's list, but should also be cleared if the user didn't choose an option or if they were not related to the chosen option selected).

[badre429]

i agree with @rosslavery in real world app md-select has avg > 50 elements therfore its more productive to use autocomplete that only allows values from the suggestion box.

it heard breaking to see your users scrool al the way down to select element

[fxck]

@badre429 @rosslavery there's a different feature for that #3211

here specifically you can see select filtering with async results fxck@f0dd2ec

[badre429]

@fxck its a just a pull request
for me md-select with md-select-header to enable search plus clean buttun [x] it will be perfect for my apps

[gedclack]

Excuse me, how do you guys make a selection (from hundreds of options) without the discussed md-select-header ?
by using autocomplete? <-- but this is not built for doing that, right?

[julianobrasil]

@gedclack, this is an example of a email search input. As the user types an email it goes to the database, grab the suggestions and shows them in the popup panel. If the user leaves the component without selecting one of them, it clears out the typed characters.

style.css (top level file - nothing to do with template style file), not necessary since 2.0.0-beta.3 cesium-cephalopod

.mat-autocomplete-panel {
    max-width: none !important;
}

Template:

<md-input-container class="full-width">
   <!-- this the actual input control -->
   <input mdInput [formControl]="acpEmailControl" [mdAutocomplete]="acpEmail" 
      type="text" placeholder="email" autocomplete="off"
      (blur)="checkEmailControl()" autofocus required>
   <!--this produces an animation while searching for the typed characters-->
   <span mdPrefix>
      <i [style.visibility]="showEmailSearchSpinner" class="fa fa-refresh fa-spin" 
        style="font-size:14px;color:black;margin-right:5px"></i>
   </span>
</md-input-container>

<md-autocomplete #acpEmail="mdAutocomplete" [displayWith]="displayEmailFn">
   <md-option *ngFor="let user of usersFromDatabase" [value]="user" 
     [style.font-size]="'0.7rem'">
      <div>
         {{ user?.userName }}<div style="float: right">{{user?.email}}</div>
      </div>
   </md-option>
</md-autocomplete>

Typescript code:

public acpEmailControl: FormControl = new FormControl();
private emailSearchSubscription: Subscription;
public showEmailSearchSpinner = 'hidden';
public usersFromDatabase: User[] = [];
public chosenUser: User;

ngOnInit() {
   // unsubscribe in ngOnDestroy
   this.emailSearchSubscription = this.acpEmailControl.valueChanges
      .startWith(null)
      .map((user: User | any) => {
        if (user && (typeof user === 'object')) {
          this.chosenUser = user;
        } else {
          this.chosenUser = new User();
        }

        return user && typeof user === 'object' ? user.userName : user;
      })
      .debounceTime(300)
      .switchMap<string, User[]>((typedChars: string) => {
        if (typedChars !== null && typedChars.length > 1) {
          this.showEmailSearchSpinner = 'visible';
          //  Observable that goes to the database and grabs the
         //  users with email or name based on typedChars
          return this.userService.findLikeNameOrEmail(typedChars);
        } else {
          this.showEmailSearchSpinner = 'hidden';
          return Observable.of<User[]>([]);
        }
      })
      .subscribe((value: User[]) => {
        this.showEmailSearchSpinner = 'hidden';
        if (value.length > 0) {
          this.usersFromDatabase = value;
        } else {
          this.usersFromDatabase = [];
        }
      },
      err => console.log('error'));
}

// clears out the input if the user left it (blur event) without
// actually choose one of the options presented in the list
// The setTimeout is because the blur event propagates
// faster then input changes detection 
// (see @fxck's comment above)
checkEmailControl() {
  setTimeout(() => {
    if (this.chosenUser.email === '') {
      this.acpEmailControl.setValue(null);
    } 
  }, 300);
}

displayEmailFn(user: User) {
  return (user && user.email && (user.email !== '')) ? user.email : '';
}

[gedclack]

@julianobrasil thanks for showing me the codes 👍
I will try it now in my project.
*to reduce data transfer, is it a good idea if I load all the options in ngOnInit() and put it in a variable, then just filter that array with every valueChanges?
*which is better, to use FormControl and subscribe valueChanges like you did above, or just put (ngModelChange)="InputChanged()" in the template?

Thanks in advance, I am new to Angular and Angular Material.

[julianobrasil]

@gedclack, yes, you can choose the approach of saving the user's bandwith by putting all in memory (as it is done in the material.angular.io). It depends on what type of machines you expect your clients to use and how much information is available to be placed and how often you expect the end users to make use of the feature. In my environment the most common type are PC's with low memory and Microsoft office applications running with lot's of small documents. They usually have a bad UI experience dispite of all efforts to make it better. I thought saving some memory was a good path to follow. By doing it I also have the benefit of delegating to the data server the work of filtering the array for me. And of course, data transfer rates is not a significant problem for the majority of my end users.

You can change the code to use ngModelChange, but if you're going to contact the server over a network as I am, you'd have to add some extra code to do equivalent things as .debounce(300), which is available right out of the box for the valueChanges observable. Not mentioning you'll end up using another observable inside ngModelChange's function to get to the server side (as I do in the switchMap in the example code) - not sure if you're trying to run away from observables, but if so, forget it and get used to them (personally I think it's a hard thing to do in the beginning, but like anything else, it'll get easier with the practice, and they're one of the most important veins in Angular's heart).

Both of your questions may be good for larger discussions. Try asking them on stackoverflow.com to get more help (I've already heard a lot of "here is not the right place for this kind of question" in many posts. Let's avoid get lectured by moderators).

[gedclack]

@julianobrasil yep, better not to do long discussions here :) , your approach makes sense for me, but I choose to use ngModelChange and filter the array of options I put in a variable as the page load for the first time because my end users will access this Web App via Android Devices from remote locations with weak signal coverage, so I need it to send or receive data as small as possible everytime they submit something without the need to reload the entire page. Nice chat 👍