angucomplete-alt
angucomplete-alt copied to clipboard
angucomplete-alto auto populate based in other input
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;
};
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">