Question

我正在尝试在angular（+ jqeuryEasyUI）中实现autoSearch。我使用mongoDB作为数据库。

在我的控制器中，我写了类似的东西：

$scope.$watch('searchInput.text', function() {
  $timeout(functoin() {
    $scope.performSearch($scope.searchInput.text);
    }, 1500)
}

每次用户在搜索框输入中键入另一个字符时，都会调用该函数，函数：performSearch(searchInput)向mongoDB发送GET请求，以检索当前输入字符串的数据。

我的问题是，如果用户输入3个字母，我想取消第一个字母的请求和2个第一个字母的请求，并且只搜索3个字母。

这样我就使用了Timeout函数，在这段时间内改变控告者将取消先前的请求。

如何管理请求？如何告诉$watch函数，如果有任何更改，请不要发送请求？

我听说过与承诺合作，但我无法弄清楚在这种情况下它会有什么帮助。

非常感谢！

Answer 1

在你的控制器中试试这个：

var timeoutHandle;

$scope.$watch('search', function() {
  $timeout.cancel(timeoutHandle);
  timeoutHandle = $timeout(function() {
    console.log('searching');
  }, 1500)
})

这将取消之前的超时，并在每次更改输入时设置一个新超时，以便仅在最后一次更改后1.5秒发送请求。

PLUNKER

Answer 2

您是否考虑过使用AngulaUI-Bootstrap typeahead功能？请参阅this link。它具有超时配置，触发搜索的最小字符等。它也可以向东实施。

Answer 3

我有这种功能，以下是示例代码：

控制器中的

MyService.delayCall(function() {

            MyService.someFunc(function(data) {
                ...
            });

        },400);

服务中的

 delayCallId : 0,
       delayCall : function(call,milisecs) {
           this.delayCallId++;
           var xxx = this;
           var myId = this.delayCallId;
           $timeout(function() {
               if (xxx.delayCallId === myId) {
                   call();
               }
           }, milisecs);
       }

someFuncRequest: 1,
        someFunc : function(callback) {
            this.doyouwantRequest++;
            var xxx = this;
            $http.get(
                    '/some/rest/function?requestId='
                    + this.someFuncRequest).success(
                    function(data, status) {
                        if (xxx.someFuncRequest == data.id) {
                            callback(data);
                        }
                    }).error(function(data, status) {
                callback(data);
            });
        }

如何在角度中实现自动搜索？

3 个答案: