md2/autocomplete/autocomplete.html

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.

<div class="md2-autocomplete-trigger" [class.is-focused]="_inputFocused || isMenuVisible"><input [(ngModel)]="_inputValue" type="text" autocomplete="off" [readonly]="readonly" [tabindex]="disabled ? -1 : tabindex" [disabled]="disabled" class="md2-autocomplete-input" (focus)="_handleFocus()" (blur)="_handleBlur()" (keydown)="_handleKeydown($event)" (keyup)="_handleKeyup($event)" (change)="$event.stopPropagation()"> <span class="md2-autocomplete-placeholder" [class.has-value]="_inputValue">{{ placeholder }} </span><svg *ngIf="_inputValue && !required && !disabled" (click)="_onClear()" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div><ul *ngIf="isMenuVisible" class="md2-autocomplete-menu" (mouseenter)="_handleMouseEnter()" (mouseleave)="_handleMouseLeave()"><li class="md2-option" *ngFor="let l of _list; let i = index;" [class.focus]="_focusedOption === i" (click)="_selectOption($event, i)"><div class="md2-text" [innerHtml]="l.text | highlight:_inputValue"></div></li></ul>