Change selected value in md-autocomplete in angular material

Question

I using md-autocomplete in my page, Now I need to edit a record, how to change selected value in md-autocomplete programmatically?

This is angular code:

app.controller('DemoCtrl', DemoCtrl);
function DemoCtrl($timeout, $q, $log) {
    var self = this;
    self.simulateQuery = false;
    self.isDisabled = false;
    self.states = loadAll();
    self.querySearch = querySearch;

    function querySearch(query) {
        var results = query ? self.states.filter(createFilterFor(query)) : self.states,
                deferred;
        if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () {
                deferred.resolve(results);
            }, Math.random() * 1000, false);
            return deferred.promise;
        } else {
            return results;
        }
    }
    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) {
            return (state.value.indexOf(lowercaseQuery) != -1);
        };
    }
    function loadAll() {
        return totlaTablaeau.map(function (repo) {
            repo.value = repo.address.toLowerCase();
            return repo;
        });

    }
};

First thing is, you should have a variable that is assigned to ng-model of auto-complete, then second thing why are you doing repo.value instead you can just return repo.address.toLowerCase() and assign a value to the variable that is in ng-model of auto-complete. — Rakesh Chand
– Rakesh Chand, Commented Jul 13, 2016 at 12:35
I mean is how to change selected value in md-autocomplete programmatically? — Farshid
– Farshid, Commented Jul 13, 2016 at 12:42
I just explained the same, If you need specific answer then update you html code. — Rakesh Chand
– Rakesh Chand, Commented Jul 13, 2016 at 12:43

camden_kid · Accepted Answer · 2016-07-13 12:48:56Z

7

Here's a CodePen using the online docs example. You just need to set the value of md-selected-item.

Markup

<md-autocomplete ... md-selected-item="ctrl.selectedItem" ...></md-autocomplete>

...

<md-button class="md-raised md-primary" ng-click="ctrl.selectArkansas()">Select Arkansas</md-button>

JS

self.selectArkansas = function() {
  self.selectedItem = {
      value: "Arkansas".toLowerCase(),
      display: "Arkansas"
    };
}

answered Jul 13, 2016 at 12:48

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Farshid Over a year ago

Thanks, it was useful.

Harish Verma · Accepted Answer · 2018-08-31 17:27:56Z

Your Html template looks like this.

<md-autocomplete
  md-selected-item="model"
  md-search-text="search_text"
  md-items="item in searchResults()"
  md-item-text="item.title"
  md-min-length="3"
  md-floating-label="Your Label"
  placeholder="placeholder"
  >
  <md-item-template>
      <span> {{item.title}},{{item.name}}</span>
  </md-item-template>
  <md-not-found>
    No matches found.
  </md-not-found>
</md-autocomplete>

Your controller code

class Controller {
  constructor($service) {
    this.$service = $service;
  }
  //we are init the varible hare.
  $onInit() {
    this.search_text = "";
    //set by defaut value in you auto complete.   
    this.model = {id:'0000',title:'defalt',name:'Your Name'};
  }
 }
  //function for get data list
  // $service this is service function we can define in over services file and we can inject this way   
  searchResults() {
    let {  $service, search_text } = this;
    return $service.search(search_text).then((data) =>data.list).catch(err =>{ });
  }  
     //Responce data look like this
     //[{id:'00h1',title:'test1',name:'harish verma'}, 
     //{id:'00h2',title:'test1',name:'harish verma'}, 
     //{id:'00h3',title:'test1',name:'harish verma'}, 
     //{id:'00h4',title:'test1',name:'harish verma'}];
}

Controller.$inject = [
  "Service"
];

export default Controller;


set by defaut value in you auto complete.

this.model = {id:'0000',title:'defalt',name:'Your Name'};

Collectives™ on Stack Overflow

Change selected value in md-autocomplete in angular material

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related