ui.bootstrap.typeahead: 如何将 $http 与 debounce 相结合

Question

我想利用 ui.bootstrap.typeahead 因为它非常好。我正在执行一个可能包含数百万用户的数据库搜索，所以我真的很希望能够在调用 $http 之前消除搜索框中的击键。否则每次击键都会导致搜索，而较早的击键生成的搜索速度会比晚些时候的击键慢，从而导致用户体验笨拙。

我目前的努力是这样的：

JavaScript:

angular.module("mycontrollers").controller("myCtrl", [
    "$scope", "$http", "rx", "localisationService", "close", function ($scope, $http, rx, localisationService, close) {
        var culture = localisationService.getCulture();
        function getUsersObservable(val) {
            return rx.Observable
                .fromPromise($http.get("/api/" + culture + "/usersearch", { params: { userName: val } }))
                .map(function (response) {
                    return response.data;
                });
        }
        $scope.close = close;
        $scope.$createObservableFunction("getUsers")
            .debounce(400)
            .filter(function (val) {
                return val.length > 0;
            })
            .flatMapLatest(getUsersObservable)
            .subscribe();
    }
]);

HTML:

<div class="form-group">
    <label for="the-user" localised-text-key="TheUser"></label>
    <input type="text" id="the-user" ng-model="userId" uib-typeahead="user for user in getUsers($viewValue)" typeahead-loading="loadingUsers" class="form-control" />
</div>

服务器端：

public async Task<IHttpActionResult> Get(string userName)
{
    var users = await _modelContext.Users.Where(u => u.UserName.Contains(userName)).OrderBy(u => u.UserName).Select(u => u.UserName).Take(20).ToArrayAsync();
    return Ok(users);
}

输入正确去抖； JavaScript 开头的 rx.observable 将搜索结果作为字符串数组返回，并正确地对输入进行反跳。我不确定如何将结果打包成可以被 ui.bootstrap.typeahead.

正确解释的承诺

Answer 1

好的，我在文档中完全错过了它

ng-model-options $ - Options for ng-model (see ng-model-options directive). Currently supports the debounce and getterSetter options.

因此，该指令允许您将选项附加到它的 ng-model，就像普通的 ol' Angular 一样。

因此您可以使用它为您的模型值设置 debouce，然后通过 ng-change 指令调用函数。

<input type="text" id="the-user" 
    ng-model="userId" 
    ng-model-options="{'debounce': 500}" 
    ng-change="sendHttpAfterDebounce()"
    uib-typeahead="user for user in getUsers($viewValue)" typeahead- 
    loading="loadingUsers" 
    class="form-control" />

现在您的函数 (sendHttpAfterDebounce) 将在您完成输入后运行 500 毫秒。

ui.bootstrap.typeahead: 如何将 $http 与 debounce 相结合

ui.bootstrap.typeahead: how to combine $http with debounce

javascript

c#

rxjs

twitter-bootstrap

angular-ui-bootstrap