2

角度のある素材のオートコンプリートを、要件ではなく提案のリストにしたい。ただし、Angular Material docs の明確な例ではないため、実装方法がわかりません。

以下の例では、私のモデルは$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。

4

2 に答える 2

2

@masitkoの回答を改善するために、フィルターをフィルターされたリストにクエリを追加する方法でフィルターを実装しました。したがって、選択可能で有効なオプションになります。そのため、オートコンプリートを提案ボックスにすることができます。

プロジェクトでES6を使用しています。しかし、ES5 コードに簡単に適応できるはずです。

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;
}
于 2016-10-12T10:59:07.277 に答える