Свободный ввод текста в угловой материал mdAutoComplete

Question

Я хочу, чтобы мой автозаполненный угловой материал был списком предложений, но не требований. Однако я не уверен, как реализовать, поскольку их нет четкого примера из документов 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> 

контроллер:

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 фильтровать элементы

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