Search code examples
angularjsangularjs-directiveangularjs-ng-repeatmd-autocomplete

How to change options when searching in md-autocomplete


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;
}

enter image description here


Solution

  • 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;
    }