Angularjs md-autocomplete with profile pictures

Question

I have a search bar in the top my page for searching profiles. I would like to have an autocompletion feature like in facebook or linkedin. I'm using angularjs in the front.

I need to show records of the found profiles with their images alongside with their full names.

How can I set the images of the found profiles in the md-items of md-autocomplete (is that possible at all)? Is there a better way for such autocompletion without re-inventing the whole wheel, except the md-autocopmlete?

Thanks

yes its possible, see `Custom template` example on this link https://material.angularjs.org/latest/demo/autocomplete — the_mishra, Jun 08 '17 at 08:24

score 1 · Answer 1 · answered Jun 08 '17 at 08:34

1

yes, you can. use md-icon to add an icon to your autocomplete result.

<md-autocomplete class="no-float" flex md-no-cache="noCache" md-selected-item="selectedItem" md-search-text="searchText" md-items="item in vm.querySearch(searchText)" md-item-text="item.display" md-floating-label="Project">
    <md-item-template>
        <span class="item-title">
          <md-icon md-svg-icon="{{item.image}}"></md-icon> 
        </span>
        <span class="item-metadata">
            <span class="item-metastat">
                <strong>{{item.email}}</strong>
            </span>
        </span>
    </md-item-template>
</md-autocomplete>

answered Jun 08 '17 at 08:34

Sachila Ranawaka

39,756
7
56
80

Works like a charm. Thank you very much – Shimon Topach Jun 14 '17 at 12:00
@Shimon Topach nice !! make sure to check as right answer if this helped :D – Sachila Ranawaka Jun 14 '17 at 12:05
I did but because of the low reputation it's not visible yet. I'm trying to gain some – Shimon Topach Jun 14 '17 at 12:40

Angularjs md-autocomplete with profile pictures

1 Answers1