angucomplete-alt icon indicating copy to clipboard operation
angucomplete-alt copied to clipboard

angucomplete-alto auto populate based in other input

Open bonucci opened this issue 7 years ago • 1 comments

i have 2 autocomplete select box with a particular feature, basically in the first autocomplate i have a input that accepts a code, and in this code is related with a label. So basically when i select the code of the first input it autofills the second input with the selected object related. But in the second input haves also a autocomplete feature since the code is not a required field.

Bit there is a detail in the first input (code), the code is always 2 charecters, not more or less, but the user can insert more than 2 charecters. In my code it works fine, but there is a detail, the input 1 (code) it autoselects the object and the first input removes the extra charecters of the user, but i need to have them there. How do i customize it?

My code is:

<div angucomplete-alt
                                  id="flight_code"

                                  placeholder="flight code"
                                  pause="100"
                                  selected-object="claim.flight_details.flight_code"
                                  local-data="airlines"
                                  local-search="localSearch"
                                  search-fields="code_airline"
                                  title-field="code_airline"
                                  minlength="2"
                                  input-name="operating_airline"
                                  input-class="form-control form-control-small"
                                  match-class="highlight"
                                  field-required="false">

<div angucomplete-alt
                                   local-search="localSearch"
                                  id="operating_airline"
                                  placeholder="Search airline"
                                  pause="100"
                                  selected-object="claim.flight_details.operating_airline"
                                  local-data="airlines"
                                  search-fields="label"
                                  title-field="label"
                                  minlength="1"
                                  input-name="operating_airline"
                                  input-class="form-control form-control-small"
                                  match-class="highlight"
                                  field-required="true"
                                  initial-value="claim.flight_details.flight_code.originalObject">
                                </div>

Controller:

 $scope.localSearch = function(str, code_airline) {
  var matches = [];
  code_airline.forEach(function(code) {

      if(str.toString().substring(0, 2).toUpperCase() === code.code_airline){
          console.log("I found him!!");
          matches.push(code);
      }       

  });
  return matches;
};

bonucci avatar Mar 30 '17 11:03 bonucci

I resolved my issue, in made de first input code to a normal input a use the directive ngChange to detect the chareceters and than create a promise to search for the object and than inserted in the angcomplete input using the initialValue:

controller:

$scope.automaticFill = function(){
    var str = $scope.claim.flight_details.flight_code;
if(str.length >= 2){
          console.log("Im changed");
       $http.get('data/airlines-companies.json').then(function(response){
           
        var airlines = response.data; 
           
            airlines.forEach(function(code) {
            if(code.code_airline === str.toString().substring(0, 2).toUpperCase())
             $scope.test = code;
            });
        });
          
      }
};    
    

Html:

 <input type="text" 
                                class="form-control" 
                                ng-model="claim.flight_details.flight_code" 
                                name="flight_code" 
                                id="flight_code"
                                ng-change="automaticFill()">

<div angucomplete-alt
                                   local-search="tap"
                                  id="operating_airline"
                                  placeholder="Search airline"
                                  pause="100"
                                  selected-object="claim.flight_details.operating_airline"
                                  local-data="airlines"
                                  search-fields="label"
                                  title-field="label"
                                  minlength="1"
                                  input-name="operating_airline"
                                  input-class="form-control form-control-small"
                                  match-class="highlight"
                                  field-required="true"
                                  initial-value="test">

bonucci avatar Mar 30 '17 11:03 bonucci