使用自动完成从带有 angularjs 材料的数据库中获取数据

Question

我想使用自动完成功能从数据库中获取数据 在我的应用程序中，我有 150 多家公司，用户必须选择其中一家，所以我想使用自动完成功能 因此，当用户在文本字段中写 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 代码与您自己的代码混合在一起。

自动完成接受通过项目数组或简单数组解决的承诺。承诺永远不会通过任何响应或数据得到解决，因为它在filterCompany 中得到解决： 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;
                });
}

这就是你所需要的。