Question

我有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;
};

Answer 1

我解决了我的问题，在第一个输入代码到正常输入时使用指令ngChange来检测chareceters而不是创建一个承诺来搜索对象，而不是使用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">

angucomplete-alto auto fillulate基于其他输入

1 个答案: