Add footer with link in list of suggestions in autocomplete material angular

Question

I'm building a website using the (awesome looking) Angular Material. I am now using the Autocomplete Component and I would like to add a fixed footer to the list of suggestions. Something like you can see in the image below, in which Pinterest adds twitter and google+ to the footer of the user search suggestions:

I tried to add a footer in the html md-autocomplete component:

<md-content layout-padding="" layout="column">
    <form ng-submit="$event.preventDefault()">
        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" md-min-length="0" placeholder="e-mail of naam " md-menu-class="autocomplete-custom-template">
            <md-item-template>
                <span class="item-title">
                    <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
                    <span> {{item.name}} </span>
                </span>
            </md-item-template>
            <md-item-template>
                <footer><a href="">Some link</a></footer>   
            </md-item-template>
        </md-autocomplete>
    </form>
</md-content>

Unfortunately this doesn't work, nothing gets displayed. Here is the working example of the Material Autocomplete.

Does anybody know how I can add a fixed footer to the suggestions of the Angular Material Autocomplete? All tips are welcome!

Answer 1

I do not think you can ad additional template to md-autocomplete. I believe that md-autocomplete clean up the selection list, and rebuilding it by repeating md-item-template

Thus, it's better to add additional data at the end of your search.

Here is the example. http://codepen.io/anon/pen/xGyLXP?editors=101

Controller parts

self.fixedOnes = [
  {'name'      : 'FIXED1', type: 'fixed'},
  {'name'      : 'FIXED2', type: 'fixed'},
  {'name'      : 'FIXED3', type: 'fixed'}
];

Html part

<md-autocomplete  ...
  md-items="item in (ctrl.querySearch(ctrl.searchText).concat(ctrl.fixedOnes))" ... >
    <md-item-template>
      <div ng-class="{fixed:item.type=='fixed'}">
        <span> {{item.name}} </span>
      </div>
    </md-item-template>
  </md-autocomplete>

------------- EDIT -----------------------
For, different style and contents, you can use ng-class, ng-if, of ng-show wisely since the contents of md-item-template are compiled.

I have updated the above answer for fixed ones to have different style.