GitHub: https://github.com/Xinzheng-Li/AngularCustomerComponent

效果图:为了方便使用,把许多比如ADD的功能去了,可以在使用后自行实现。

基于 Angular和Material autocomplete组件再封装的可双向绑定key-value的可输入下拉框-LMLPHP

基于 Angular和Material autocomplete组件再封装的可双向绑定key-value的可输入下拉框-LMLPHP

基于 Angular和Material autocomplete组件再封装的可双向绑定key-value的可输入下拉框-LMLPHP

基于 Angular和Material autocomplete组件再封装的可双向绑定key-value的可输入下拉框-LMLPHP

基于 Angular和Material autocomplete组件再封装的可双向绑定key-value的可输入下拉框-LMLPHP

调用:

1     <app-autocomplete-input [menuItems]="autocompleteInputData" [(model)]="autocompleteInputModel" [showAddBtn]="true"
2         [(value)]="autocompleteInputValue" (objectChange)="onChange($event)" (focus)="onFocus($event)"
3         (input)="onInput($event)" (change)="onModelChange($event)" (blur)="onBlur($event)"
4         #autocompleteInput></app-autocomplete-input>
10-10 10:47