<md-autocomplete md-no-cache="false" md-min-length="0" md-selected-item="vm.selectedItem" md-search-text="vm.searchText" md-items="item in vm.querySearch(vm.searchText,vm.list)"
md-item-text="item.name" placeholder="Input School Name" md-menu-class="autocomplete-custom-template" style="background:none;">
<md-item-template>
<span style="display: block;line-height: 2;" md-highlight-text="vm.searchText" md-highlight-flags="^i">{{item.name}}</span>
<span style="display: block;line-height: 2;" md-highlight-text="vm.searchText" md-highlight-flags="i">{{item.alias}}</span>
</md-item-template>
<md-not-found>
No colleges matching "{{vm.searchText}}" were found. Please contact AB or Administrator
</md-not-found>
</md-autocomplete>
querySearch(search, list) {
return search ? list.filter((item) => {
return (item.name.toLowerCase().indexOf(search.toLowerCase()) !== -1) || (item.alias.toLowerCase().indexOf(search.toLowerCase()) !== -1);
}) : list;
}
this.list = [
{
name: 'kaifeng',
alias: 'meili'
},
{
name: 'luoyang',
alias: 'gucheng'
},
{
name: 'chengdu',
alias:'tianfuzhiguo'
},
{
name: 'chongqing',
alias: 'henla'
}
]
this.$scope.$watch(()=> {return this.selectedItem}, (newVal, oldVal) => {
if(newVal){
console.log(newVal);
console.log(oldVal);
}
})
autocomplete的使用方法总结,直接套用
最新推荐文章于 2022-07-21 10:53:25 发布