如何在AngularJS中实现服务器端搜索框

Question

如何在AngularJS中实现服务器端搜索框

javascriptc#jqueryasp.net-mvcangularjs

3

如何使用AngularJS在html输入框中实现自动完成功能的快速高效服务器端组件？

我想实现这样的功能：我们可以设置一个定时器任务，在每次按键后都会重置，然后延迟0.5秒。这样，如果用户快速输入多个字符，它不会在每个按键时查询索引，只有当用户暂停一秒钟时才会进行查询。

目前，我正在使用以下代码-

在Html中-

<input class="form-control" ng-model="Search" ng-change="SearchResults(Search)" type="text" />

我的 JavaScript 代码如下：

$scope.SearchResults = function (SearchText) {
        $scope.Request = new Request();
        $scope.Request.Criteria = "[{Key:'SearchText', Value:'" + SearchText + "'}]";
        projectRepository.get($scope.Request.get(), function (data) {
            $scope.Projects = data.Data;
            $scope.Request.set(data);  
        })
    }

提前感谢您。

- Amit Agarwal

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RSquared · Accepted Answer

在发送get请求之前，我会创建一个超时时间，在您输入框中输入内容时会清除该超时时间。代码示例如下：

var promise;
$scope.SearchResults = function (SearchText) {
    if(promise) $timeout.cancel(promise);

    promise = $timeout(function(){
        // do service call
        alert(SearchText);           
    }, 500);
}

JSFiddle: http://jsfiddle.net/o4ntvvdg/

请注意，每次用户发送新请求时，都应该有一些逻辑来取消旧请求。否则，您需要将它们排队并找出哪个是最新的。

编辑：修正解决方案的错误描述。