How to set a value to ion-autocomplete

Question

I am using ion-autocomplete (https://github.com/guylabs/ion-autocomplete) for my mobile application. I need to set the selected value in ion-autocomplete, which is similar to dropdownlist.

For eg: Autocomplete to displays all the countries, need to set the selected country. If the user already selected the country India, when he open again for edit it should show India selected and also to show other values.

 <input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" 
                placeholder="Enter the country to search" 
                items-method="getCountries(query)" 
                items-clicked-method="loadStates(callback)"
                item-view-value-key="name" 
                item-value-key="id_country"  
                items-method-value-key="items"  
                max-selected-items="1"  
                autocomplete="off" 
                ng-model="registration.id_country"/>

  $scope.countries =[{"id_country":"1","sortname":"AF","name":"Afghanistan"},
                    {"id_country":"2","sortname":"AL","name":"Albania"},
                    {"id_country":"3","sortname":"DZ","name":"Algeria"},
                    {"id_country":"4","sortname":"AS","name":"American Samoa"},
                    {"id_country":"5","sortname":"IN","name":"India"}]; 

    $scope.getCountries = function(query) {

        var returnValue = { items: [],selectedItems:[] };
        $scope.countries.forEach(function(item){

            if (item.name.indexOf(query) > -1 ){
                returnValue.items.push(item);
            }
            else if (item.id_country.indexOf(query) > -1 ){
                returnValue.items.push(item);
            }
        });

      return returnValue;
    }

In ng-model registration.id_country, I am passing the country id. I have tried similar to set the value by passing to ng-model but not successful.

Answer 1

To pre-populate the selected items in the ion autocomplete widget, you have to set the attribute ExternalModel to the initial value you want, and you have to implement a special method model-to-item-method that takes the selected value as an input and retrieves the whole object from your data array. Below is a working code sample. More info here

Controller code

app.controller('ExampleCtrl', function($scope) {

  $scope.countries =[{"id_country":"1","sortname":"AF","name":"Afghanistan"},
                    {"id_country":"2","sortname":"AL","name":"Albania"},
                    {"id_country":"3","sortname":"DZ","name":"Algeria"},
                    {"id_country":"4","sortname":"AS","name":"American Samoa"},
                    {"id_country":"5","sortname":"IN","name":"India"}];


    $scope.initialCountry = ["2"];

    $scope.getCountries = function(query, isInitializing) {
        var returnValue = { items: [],selectedItems:[] };
        $scope.countries.forEach(function(item){
            if (item.name.indexOf(query) > -1 ){
                returnValue.items.push(item);
            }
            else if (item.id_country.indexOf(query) > -1 ){
                returnValue.items.push(item);
            }
        });

      return returnValue;
    };

    $scope.modelToItemMethod = function (modelValue) {

    for(var i = 0; i < $scope.countries.length; i++){
      if($scope.countries[i].id_country == modelValue){
        return $scope.countries[i];
      }
    }
    return {};
  };
});

HTML

  <ion-content ng-controller="ExampleCtrl">
    <input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete"
            placeholder="Enter the country to search"
            items-method="getCountries(query)"
            items-clicked-method="clickedMethod(callback)"
            item-view-value-key="name"
            item-value-key="id_country"
            items-method-value-key="items"
            max-selected-items="1"
            autocomplete="off"
            ng-model="currentCountry"
            external-model="initialCountry"
            model-to-item-method="modelToItemMethod(modelValue)"
            />
          </ion-content>