angular-material - Angular Material mdAutoComplete 中的自由文本输入

Question

我希望我的角度 Material 自动完成功能成为建议列表，而不是要求列表。但是我不确定如何实现，因为 Angular Material 文档中没有明确的示例。

在下面的示例中，我的模型是 $ctrl.item.category

显然下面的示例是错误的，因为我的模型链接到 md-selected-item，但这仅在我选择一个项目时才有效。我希望如果该项目不在列表中，用户能够自由输入文本。基本上，自动完成功能在大多数浏览器中都是如何工作的。

我看到很多关于如何禁用此功能的问题，但他们并没有尝试禁用它，而是在未选择项目时清理剩余的文本。在这些情况下，如果未选择某个项目，则模型值为 null，但文本会保留在输入中。

如果用户未选择(或未进行匹配)，我希望输入中留下的文本成为模型值。

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}}

我的选项($ctrl.categories)是一个字符串数组['Food','Liqour']，我希望用户能够使用一个其中或自由输入Tables作为他们的选择。

Answer 1

在这种情况下，您应该将 md-search-text 链接到您的模型。

如果你想实现模糊搜索，你必须自己编写过滤方法。看这个例子:

模板:

  <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,
  };
};

那么你只需要添加filterMyItems方法来过滤你的项目