2

在我的示例（https://jsfiddle.net/vv18yjzo/7/）中，只要关注 md-chips 输入，就应该显示自动完成建议。当我输入一些项目时，这很有效。但是，当添加然后删除所有可用项目时，自动完成建议为空/隐藏。我必须输入新的搜索文本才能再次查看自动完成建议。

HTML：

<md-input-container class="md-block">

    <label>Categories</label>

    <md-chips ng-model="vm.selectedCategories" 
        md-autocomplete-snap
        md-require-match="true"
        md-on-add="vm.onCategoryAdded($chip, $index)"
        md-on-remove="vm.onCategoryRemoved($chip, $index)">

        <md-autocomplete
            md-selected-item="vm.autocomplete.selectedItem"
            md-search-text="vm.autocomplete.searchText"
            md-selected-item-change="vm.onSelectedItemChanged()"
            md-search-text-change="vm.onSearchTextChanged()"
            md-items="item in vm.searchCategories()"
            md-item-text="item.name"
            md-min-length="0"
            md-select-on-match="true"
            md-match-case-insensitive="true"
            md-no-cache="true"
            placeholder="Choose categories">

            <span md-highlight-text="vm.autocomplete.searchText" 
                md-highlight-flags="i">{{item.name}}</span>

        </md-autocomplete>

        <md-chip-template>
            <span>
                <strong>{{$chip.name}}</strong>
            </span>
        </md-chip-template>

    </md-chips>

</md-input-container>

JS：

(function () {
    'use strict';

    angular
        .module('app', [
            'ngMaterial', 
            'ngMessages'
        ])
        .factory('CategoriesService', CategoriesService)
        .controller('CategoriesCtrl', CategoriesCtrl);

    function CategoriesService($q, $timeout) {

        var that = {
                find: find
            },
            categories = [
                { name: 'a' },
                { name: 'ab' },
                { name: 'abc' },
                { name: 'abcd' },
                { name: 'abcde' },
                { name: 'abcdef' }
            ];

        function find(search, selectedCategories) {
            var deferred = $q.defer(),
                result = categories.filter(function(category) {
                    return (-1 === selectedCategories.indexOf(category) && -1 !== category.name.indexOf(search));
                });

            $timeout(function() {
                deferred.resolve(result);
            }, 100);

            return deferred.promise;
        }

        return that;
    }

    function CategoriesCtrl($scope, CategoriesService) {
        var vm = this;

        vm.selectedCategories = [];
        vm.autocomplete = {
            selectedItem: null,
            searchText: null
        };

        /* ... */

        vm.searchCategories = function() {
            return CategoriesService.find(vm.autocomplete.searchText.toLowerCase(), vm.selectedCategories);
        };

    }

})();

示例：https ://jsfiddle.net/vv18yjzo/7/

4

1 回答 1

2

自动完成搜索文本似乎有一个奇怪的错误，如果您删除一个项目，它只会取消设置搜索文本变量，然后会破坏自动完成事件。

检查这个工作小提琴https://jsfiddle.net/mgsLkf89/3/

vm.onCategoryRemoved = function($chip, $index) {
  if (!vm.autocomplete.searchText) 
    vm.autocomplete.searchText=null;
};
于 2016-05-12T13:45:31.647 回答