javascript - md-autocomplete 搜索本地(浏览器对象)，如果找不到，则查找数据库对象

Question

我已经创建了一个 md-autocomplete 搜索，它直接使用数据库中的 $http 搜索记录，但我想要的是我希望这个 md-autocomplete 从我正在加载的对象数组中搜索对象在表单加载上，如果找不到，则应该进行数据库搜索。

(function() {

  'use strict'
  angular.module('GAiiNSApp').controller('ServicesMasterCtrl', ['$scope', '$http', 'LoadFormInteractivity', function($scope, $http, LoadFormInteractivity) {

    $scope.FormService.AllRecords = [{
        "id": 83,
        "servicename": "Blackberry Global Plan",
        "servicetype": "Postpaid",
        "monthlyrental": 299,
        "serviceremarks": "Testing",
        "servicestatus": 0,
        "activationdate": "/Date(1498852800000)/",
        "deactivationdate": null
      },
      {
        "id": 84,
        "servicename": "Internet",
        "servicetype": "Domain",
        "monthlyrental": 3090,
        "serviceremarks": "Use for Internet connection purpose only.",
        "servicestatus": 0,
        "activationdate": "/Date(1498852800000)/",
        "deactivationdate": null
      },
      {
        "id": 85,
        "servicename": "abc",
        "servicetype": "ddf",
        "monthlyrental": 4999,
        "serviceremarks": null,
        "servicestatus": 0,
        "activationdate": "/Date(1497211200000)/",
        "deactivationdate": "/Date(1497816000000)/"
      },
      {
        "id": 86,
        "servicename": "xxxxxxx",
        "servicetype": "fddf",
        "monthlyrental": 52,
        "serviceremarks": null,
        "servicestatus": 0,
        "activationdate": "/Date(1501617600000)/",
        "deactivationdate": "/Date(1499025600000)/"
      },
      {
        "id": 87,
        "servicename": "aed",
        "servicetype": "dfd",
        "monthlyrental": 120,
        "serviceremarks": null,
        "servicestatus": 0,
        "activationdate": "/Date(1498852800000)/",
        "deactivationdate": "/Date(1497902400000)/"
      },
      {
        "id": 89,
        "servicename": "sdfasdfsadfsadf",
        "servicetype": "fsdfasdfsdf",
        "monthlyrental": 10,
        "serviceremarks": null,
        "servicestatus": 0,
        "activationdate": "/Date(1499025600000)/",
        "deactivationdate": null
      },
      {
        "id": 94,
        "servicename": "e",
        "servicetype": "e",
        "monthlyrental": 10,
        "serviceremarks": null,
        "servicestatus": 0,
        "activationdate": "/Date(1499112000000)/",
        "deactivationdate": null
      }
    ];

    $scope.search = function(value) {

      //Here I want to use  $scope.FormService.AllRecords to search from in before it goes to the "NGAutoCompleteSearch"

      return LoadFormInteractivity.NGAutoCompleteSearch('/Assets/AssetsAPI/GetServiceRecord', value).then(function(res) {
        return res.data;
      });
    };


  }]);
})();


(function() {
  'use strict'
  angular.module('GAiiNSApp').factory('LoadFormInteractivity', ['$http', '$timeout', function($http, $timeout) {



    function NGSearch(url, val) {
      debugger
      return $timeout(function() {
        return $http({
          url: url,
          method: "GET",
          params: {
            searchvalue: val,
          }
        });

      }, 300);

    };

    return {
      NGAutoCompleteSearch: NGSearch

    };

  }]);

})();

<div ng-controller="ServicesMasterCtrl">
  <md-autocomplete md-items="item in search(id)" md-search-text="id" md-min-length="2" md-delay="300" md-item-text="item.servicename" md-selected-item="selectedItem" md-no-cache="true" ng-model-options="{debounce: 500}" md-search-text-change="SearchChanged(id)"
    placeholder="Search service by id or name">
    <md-item-template>
      <span class="item-title">
                                Id:{{item.id}}
                            </span>
      <span class="item-metadata">
                                <span class="item-metastat">
                                    Service: <strong> {{item.servicename}} </strong>
                                </span>
      <span class="item-metastat" ng-if="!!item.montlyrental">
                                    MonthlyRental: <strong> {{item.montlyrental}} </strong>
                                </span>
      <span class="item-metastat" ng-if="!!item.activationdate">
                                    ActiveDate: <strong> {{item.activationdate |  ConvertToDate | date: 'dd-MMM-yyyy'}} </strong>
                                </span>
      </span>
    </md-item-template>
    <md-not-found>
      No matching items found...
    </md-not-found>
  </md-autocomplete>
</div>

Answer 1

您的 search 方法返回 Promise，以便您可以在本地列表上运行过滤器，如果没有结果则运行异步调用。像这样的东西:

$scope.search = function(filterText) {
      var d = $q.defer();

        var filteredItems = [],
          searchStrLower = filterText.toLowerCase();

        filteredItems = $scope.FormService.AllRecords.filter(function(item) {
          return (item.servicename.toLowerCase()).indexOf(searchStrLower) > -1;
        });

        if (filteredItems.length === 0) {
          LoadFormInteractivity.
             NGAutoCompleteSearch('/Assets/AssetsAPI/GetServiceRecord', value)
         .then(function(res) {
            d.resolve(res);
          });

        } else {
          d.resolve(filteredItems);
        }      

      return d.promise;
    };

你可以玩这个 DEMO