Question

我正在建立一个网站，要求自动填充功能加载来自ajax的结果，所以我决定选择角度材质自动完成功能及其工作正常。

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

请参阅附图：

results required like inimage

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

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

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

角度材质自动填充自定义模板 - 组项目

2 个答案: