Angular Material Autocomplete 自定义模板 - 分组项目答案

【问题标题】：Angular Material Autocomplete custom template - group itemsAngular Material Autocomplete 自定义模板 - 分组项目
【发布时间】：2016-03-05 07:00:15
【问题描述】：

我正在构建一个需要自动完成功能才能从 ajax 加载结果的网站，所以我决定选择有角度的材料自动完成功能并且它工作正常。

到目前为止，我的要求是显示一种类型的搜索结果，假设我需要显示国家名称的搜索结果，但现在我的要求更改为显示国家名称和州名，这导致我做出国家和州两个不同的组，我没有找到显示解决方案来修改角度材料自动完成自定义模板。

请看附图：

【问题讨论】：

标签： angularjs autocomplete angular-material

【解决方案1】：

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

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

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);

【讨论】：

【解决方案2】：

我创建了一个可以帮助您的解决方案。请找链接 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;
               }
            })

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

【讨论】：

嗨，Durgaprasad Budhwani，非常感谢您为我提供解决方案，但不幸的是它没有按预期工作，我不希望选择国家名称，而且搜索州名称也无法正常工作，你能挖掘更多的完美解决方案吗？