Having two autocomplete select boxes with a unique feature has been quite interesting. The first input accepts a code that is related to a label, autofilling the second input with the corresponding object once the code is selected in the first input. However, the second input also offers autocomplete functionality as the code field is not mandatory.
An important detail about the first input (code) is that it always consists of 2 characters, no more and no less. Despite this, users can still input more than 2 characters. While my code effectively auto-selects the object and removes any extra characters beyond the required 2 from the user's input in the first field, I actually need those additional characters to remain. How can I customize this functionality?
The autocomplete module I am utilizing is Angucomplete-Alt.
Here's a snippet of my code:
<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;
};