简体   繁体   中英

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

在此处输入图片说明

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM