Custom <md-item-template> for md-autocomplete - autocomplete

Question

Is there any way to use custom templates and group the matched results by a specific type property (like in the image bellow)?
Using this code.
<md-item-template>
<div class="col-xs-2 border-bottom: 1px solid #ccc;">
<span class="item-metastat" ng-if="item.type=='Staff'">
{{item.type }}
</span>
<span class="item-metastat" ng-if="item.type=='Branch'">
{{item.type }}
</span>
<span class="item-metastat" ng-if="item.type=='Region'">
{{item.type }}
</span>
<span class="item-metastat" ng-if="item.type=='State'">
{{item.type }}
</span>
</div>
<div class="col-xs-10 display">
<span> {{item.value}} </span>
</div>
</md-item-template>
i am able to create this design
What modification i need to do to repeat type only for a single time i.e first time ??

Answer 1

Unfortunately, there is currently no way of doing this. I was struggling around with the same problem lately and the devs #angular-material have closed all of their issues due to deprecation effort.
https://github.com/angular/material/issues/5182
We are going to have to rely on other components or fork the angular-material repository to create our own extended version of this directive.

Answer 2

I had a similar problem and this is how I fixed it:
https://plnkr.co/edit/R62Dp2JG0N8xNGU2pIQj?p=preview
Template:
<div class="row card-container">
<div class="col-xs-2">
{{item.type }}
</div>
<div class="col-xs-10 display">
<span>
{{item.value}}
</span>
<span >
<span class="meta-data-panel">
<div>
<strong>Id:</strong> {{item.id}}
</div>
<div>
<strong>Name:</strong> {{item.name}}
</div>
<div>
<strong>desc:</strong> {{item.desc}}
</div>
</span>
</span>
</div>
</div>
CSS
.meta-data-panel{
position: absolute;
top: 30px;
color: grey;
left: 25px;
}
.meta-data-container{
background-color:white;
}
.meta-data-panel > div{
display:block;
margin:0px;
height:25px;
}
.card-container{
border:1px solid #ccc;
height:130px;
}
.autocomplete-custom-template li{
position: relative;
height:130px;
}
Be aware that this using position absolute styling so you need to be careful with handling text wrapping and change the size based on the number of elements you are going to display.