Free Text Entry in Angular Material mdAutoComplete

Question

I want my angular material autocomplete to be a list of suggestions but not requirements. However I'm not sure how to implement as their is no clear example from the Angular Material docs.

In the example below my model is $ctrl.item.category

Clearly the example below is wrong, as my model is linked to md-selected-item, but this only works if I select an item. I want the user to be able to free enter the text if the item is not in the list. Basically how autocomplete already works in most browsers.

I see plenty of questions on how to disable this, but they are not trying to disable so much as clean up the left over text when an item is not selected. In these cases when an item is not selected then the model value is null, but text is left in the input.

I want the text left int he input to be the model value if the person does not select (or a match is not made).

md-autocomplete(
  md-floating-label="Category Name"
  flex="50"
  md-input-name="category"
  md-selected-item="$ctrl.item.category"
  md-search-text="catSearch"
  md-items="category in $ctrl.categories"
  md-item-text="category"
  md-min-length="0"
  md-select-on-match=""
  md-match-case-insensitive=""
  required=""
  )
  md-item-template
    span(md-highlight-text="catSearch" md-highlight-flags="^i") {{category}}

My options ($ctrl.categories) is an array of strings ['Food','Liqour'] and I wan the user to be able to use one of those or free enter Tables as their choice.

masitko · Answer 1 · 2016-06-22T21:51:27.257

2

In this case you should link md-search-text to your model.

If you want to implement fuzzy search you have to write the filter method yourself. Look at this example:

template:

  <md-autocomplete
    md-items="item in $ctrl.itemsFilter()"
    md-item-text="item.label"
    md-search-text="$ctrl.query"
    md-selected-item="$ctrl.selected"
    >
    <md-item-template>
      <span md-highlight-text="$ctrl.query">{{item.label}}</span>
    </md-item-template>

     <md-not-found>
        No item matching "{{$ctrl.query}}" were found.
     </md-not-found>        

   <div ng-messages="$ctrl.myValidator($ctrl.query)">
      <div ng-message="short">Min 2 characters</div>
      <div ng-message="required">Required value</div>
    </div>

  </md-autocomplete>

controller:

var items = [ ... ];
ctrl.itemsFilter = function itemsFilter() {
    return ctrl.query ? filterMyItems(ctrl.query) : items;
};
ctrl.myValidator = function (value) {
  return {
    short: value && value.length < 2,
    required : value && value.length < 1,
  };
};

then you just need to add filterMyItems method to filter your items

edited Jun 22 '16 at 21:51

answered Jun 16 '16 at 08:09

masitko

610
7
9

Thanks for the response. This approach does not work, because the input is not tied to any of the validation hooks. If you use `required` then and selection must be made and the text in the box is not sufficient. – Meeker Jun 20 '16 at 12:57
It looks like md-autoselect uses **md-selected-item** when validating. You can validate/invalidate fields manually using something like `$scope.formName.inputName.$setValidity(errorKey, isValid)` – masitko Jun 20 '16 at 15:23
from what it looks like there are a couple of PRs that look to be pushing through that might solve this issue. Based on what I can tell mdAutocomplete was never meant to be a suggestion box as traditionally used in a browser, but more of a select box with a text input filter. – Meeker Jun 20 '16 at 17:29
I've added two validation options you can use. **md-not-found** will tell you when no items matches entered text (still in md-search-text). There is also example how to implement custom error messages. – masitko Jun 22 '16 at 21:52
I believe that `md-require-match` should be responsible for that (see [issue #2492](https://github.com/angular/material/issues/2492)). I would think that if that option is not set to `true` (and by default it is `false`), the functionality for free text in text box should just work. But it does not. Maybe someone could paste a complete example to jsfiddle.net? – dma_k Feb 09 '17 at 16:22

score 2 · Answer 2 · edited May 23 '17 at 11:48

To improve the answer of @masitko, I have implemented the filter in a way, that it adds the query to the filtered list. So it becomes selectable and a valid option. So it's possible to make the autocomplete a suggestion box.

I'm using ES6 in my projects. But it should be easily adaptable to ES5 code.

myFilter() {
    if (!this.query) return this.items;

    const
        query = this.query.toLowerCase(),
        // filter items where the query is a substing
        filtered = this.items.filter(item => {
            if (!item) return false;
            return item.toLowerCase().includes(query);
        });

    // add search query to filtered list, to make it selectable 
    // (only if no exact match).
    if (filtered.length !== 1 || filtered[0].toLowerCase() !== query) {
        filtered.push(this.query);
    }

    return filtered;
}

Free Text Entry in Angular Material mdAutoComplete

2 Answers2