angucomplete-alto 根据其他输入自动填充答案

【问题标题】：angucomplete-alto auto populate based in other inputangucomplete-alto 根据其他输入自动填充
【发布时间】：2017-03-30 10:42:30
【问题描述】：

我有 2 个具有特定功能的自动完成选择框，基本上在第一个自动完成中我有一个接受代码的输入，并且在此代码中与标签相关。所以基本上当我选择第一个输入的代码时，它会自动填充与所选对象相关的第二个输入。但在第二个输入中也有一个自动完成功能，因为代码不是必填字段。

位在第一次输入（代码）中有一个细节，代码总是2个字符，不多也不少，但用户可以插入2个以上的字符。在我的代码中它工作正常，但有一个细节，输入 1（代码）它自动选择对象，第一个输入删除了用户的额外字符，但我需要将它们放在那里。如何自定义？

我用于自动完成的模块是这个Angucomplete-Alt

我的代码是：

<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>

控制器：

 $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;
};

【问题讨论】：

标签： javascript angularjs autocomplete

【解决方案1】：

我解决了我的问题，在将第一个输入代码设置为正常输入时，使用指令 ngChange 来检测字符，然后创建一个搜索对象的承诺，然后使用 initialValue 插入到 angcomplete 输入中：

控制器：

$scope.automaticFill = function(){
    var str = $scope.claim.flight_details.flight_code;
   if(str.toString().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().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">

【讨论】：