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

Question

I have created an md-autocomplete search and its searching the records using the $http from the database directly but what I want is that I want this md-autocomplete to search for the object from the array of objects which I am loading on the form load and if not found then it should go for the database search.

 (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

Your search method returns Promise so you can run filter on local list and if no results run async call. Something like:

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

You can play with this DEMO