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

你可以玩这个演示