javascript - md-autocomplete to search local(browser object) and if not found then look for database object -

i have created md-autocomplete search , searching records using $http database directly want want md-autocomplete search object array of objects loading on form load , if not found should go 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 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 want use  $scope.formservice.allrecords search in before goes "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 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>

your search method returns promise can run filter on local list , if no results run async call. 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 demo