Angular Material 自动完成自定义模板 - 分组项目

Question

我正在构建一个需要自动完成从 ajax 加载结果的网站，所以我决定选择 angular material 自动完成并且它工作正常。

直到现在我的要求是显示一种类型的搜索结果，假设我需要显示国家名称的搜索结果，但现在我的要求更改为显示国家名称和州名称，这导致我为了使两个不同的组成为一个国家和另一个国家，我没有找到修改 angular material 自动完成自定义模板的显示解决方案。

请看附图：

Answer 1

我创建了一个可以帮助您的解决方案。请查找 link Angular Material Autocomplete custom template

这里的逻辑是，找出搜索列表中的第一个元素，并在其上添加国家名称

var states = getStates().filter(function(item) {
                    item.isFirst = false;
                return (item.state.toUpperCase().indexOf(searchText.toUpperCase()) !== -1);
            });
            var countryName = "";
            angular.forEach(states, function(item, key){
                 if(countryName != item.country){
                    countryName = item.country;
                  item.isFirst = true;
               }
            })

您必须处理在值之间添加分隔符的样式部分行。如果我能在其他情况下帮助您，请告诉我

Answer 2

您好，考虑一下这个版本，如果有帮助，请根据上面的答案修改解决方案， https://jsfiddle.net/sachinshukla5/9xykgvs6/78/

基本上只是在项目数组中添加一个额外的元素，需要在特定索引处显示。

var states = getStates().filter(function(item) {
                        item.isFirst = false;
                    return (item.state.toUpperCase().indexOf(searchText.toUpperCase()) !== -1);
                });
                var countryName = "";
                angular.forEach(states, function(item, key){
                     if(countryName != item.country){
                        countryName = item.country;
                      states.splice(key,0, {
                      "isFirst" : true,
                      "state": " ",
                      "country": countryName
                    });
                   }
                })
                deferred.resolve(states);
            }, 200);

Angular Material 自动完成自定义模板 - 分组项目

Angular Material Autocomplete custom template - group items

autocomplete

angularjs

angular-material