How to change options when i am typing in . It is not working properly when I type filter not working its show all the list i want change list text according to search please help me this.
<md-autocomplete
ng-disabled="Ctrlmain.isDisabled"
md-no-cache="Ctrlmain.noCache"
md-selected-item="Ctrlmain.selectedItem"
md-search-text="Ctrlmain.campaignname"
md-selected-item-change="Ctrlmain.filltextbox(item)"
md-items="item in Ctrlmain.getMatches(Ctrlmain.campaignname) | unique:'campaign_name'"
md-item-text="item.campaign_name"
md-min-length="0"
placeholder="Pick an Angular repository"
md-menu-class="autocomplete-custom-template">
<md-item-template>
<span class="item-title">
<span> {{item.campaign_name}} </span>
</span>
</md-item-template>
</md-autocomplete>
Angular Method
complete(str){
var output = [];
angular.forEach(this.viewData,function(campaignname){
if(campaignname.campaign_name.toLowerCase().indexOf(str.toLowerCase())>=0){
output.push(campaignname.campaign_name);
};
});
return output.campaign_name;
}
filltextbox(st){
return st;
}
Returning matches on md-search-text-change
doesn't work. Your md-autocomplete
is bound to Ctrlmian.viewData
. If that is to work, you have to modify the said array at the end of complete
function. Besides your code is essentially wrong when you try to return output.campaign_name
where output
is an array. Or you can try it this way...
<md-autocomplete
ng-disabled="Ctrlmain.isDisabled"
md-no-cache="Ctrlmain.noCache"
md-selected-item="Ctrlmain.selectedItem"
md-search-text="Ctrlmain.campaignname"
md-selected-item-change="Ctrlmain.filltextbox(item)"
md-items="item in Ctrlmain.getMatches(Ctrlmain.campaignname) | unique:'campaign_name'"
md-item-text="item.campaign_name"
md-min-length="0"
placeholder="Pick an Angular repository"
md-menu-class="autocomplete-custom-template">
<md-item-template>
<span class="item-title">
<span> {{item.campaign_name}} </span>
</span>
</md-item-template>
</md-autocomplete>
Notice I've gotten rid of md-search-text-change
. I'm using your filter function to dynamically render items for md-autocomplete
as below.
getMatches(str) {
var output = [];
angular.forEach(this.viewData,function(campaignname) {
if(campaignname.campaign_name.toLowerCase().indexOf(str.toLowerCase())>=0) {
output.push(campaignname);
};
});
return output;
}