オートコンプリートを使用してangularjsデータを持つDBからデータを取得

Question

オートコンプリートを使用してDBからデータを取得したい 私のアプリケーションには150社以上あり、そのうちの1つを選択してオートコンプリートを使用したい場合は ユーザーはテキストフィールドに2文字を書きます。これらの2文字で始まる会社を表示します。 私はここhttps://material.angularjs.org/latest/demo/autocompleteからラベルを浮動例を使用し、ちょうどその

       * Search for states... use $timeout to simulate 
          * remote dataservice call. 
          */ 
          function querySearch (query) { 
           var results = createFilterFor(query); 
           var deferred = $q.defer(); 
           $timeout(function() { deferred.resolve(results); }, Math.random() * 1000, false); 
           return deferred.promise; 
          } 



          * filterCompany function return the company that start with cmompanycode 
          */ 
          function createFilterFor (companyCode) { 
           service.filterCompany(companyCode).then(function (response) { 
            return response.data.companies; 

           }); 
          }  

のようにそれを修正し、これは、HTML

<div class="col-sm-2" ng-class="{ 'has-error': form.company.$dirty && form.company.$error.required }"> 
      <md-input-container class="md-block"> 
       <md-autocomplete flex="" required="" md-input-name="autocompleteField" md-input-minlength="2" md-input-maxlength="18" md-no-cache="ul.noCache" md-selected-item="ul.selectedItem" md-search-text="ul.searchText" md-items="item in ul.querySearch(ul.searchText)" md-item-text="item.display" md-floating-label="Favorite state"> 
        <md-item-template> 
         <span md-highlight-text="ul.searchText">{{item.display}}</span> 
        </md-item-template> 
       </md-autocomplete> 
      </md-input-container> 
     </div> 

ですが、私は、コードを実行したとき、私は

angular.js:12520 TypeError: Cannot read property 'length' of undefined 
    at W (angular-material.min.js:12) 
    at j (angular-material.min.js:12) 
    at o (angular-material.min.js:12) 
    at processQueue (angular.js:14792) 
    at angular.js:14808 
    at Scope.$eval (angular.js:16052) 
    at Scope.$digest (angular.js:15870) 
    at angular.js:16091 
    at completeOutstandingRequest (angular.js:5552) 
    at angular.js:5829 

を取得しますこれは私のサービスです

function filterCompany(companyCode){ 
       var deferred = $q.defer(); 

        // simulate api call with $timeout 
        return $timeout(function() { 
         var encodeString = 'companyCode='+companyCode 
          return $http({ 
            url: './getCompaniesAutoComplete', 
            method: "POST", 
            data: encodeString, 
            headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
           }).success(function (response) { 
            response.message = 'getUser done Successfully'; 
           }).error(function (response){ 
           response.message = 'Error during getUser operation'; 
           }); 
           deferred.resolve({ success: true }); 
         }, 1000); 
        return deferred.promise; 
       } 

Answer 1

あなたはおそらく、CTRL + C CTRL + Vの誤解を受けて、自分のコードを使って書類から偽$timeoutコードを混ぜるでしょう。

オートコンプリートは、項目の配列または単に配列で解決される約束を受け入れます。約束事は、ここで解決されるため、いかなる回答やデータでも解決されることはありません。 deferred.resolve({ success: true });

タイムアウトと手動拒否を取り除きます。その後、お使いのコントローラで

function filterCompany(companyCode) { 
    var encodeString = 'companyCode='+companyCode 
    return $http({ 
     url: './getCompaniesAutoComplete', 
     method: "POST", 
     data: encodeString, 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }); 
} 

：ような何かを

function querySearch(companyCode) { 
    return service.filterCompany(companyCode) 
       .then(function (response) { 
        return response.data.companies; 
       }); 
} 

これはあなたが必要とするすべてです。