ui.bootstrap.typeahead：如何将$ http与去抖动结合起来 [英] ui.bootstrap.typeahead: how to combine $http with debounce

问题描述

我想利用ui.bootstrap.typeahead，因为它很棒。我正在搜索一个可能包含数百万用户的数据库，所以我真的希望能够在拨打$ http之前去掉搜索框中的击键。否则，每次击键都会导致搜索，早期击键会比以后的击键产生更慢的搜索速度，从而导致笨重的用户体验。

I'd like to take advantage of ui.bootstrap.typeahead because it is excellent. I'm implementing a search of a database that could contain millions of users, so I would really like to be able to debounce keystrokes in the search box before making a call to $http. Otherwise every keystroke will result in a search, and early keystrokes will generate slower searches than later keystrokes, resulting in a clunky user experience.

我当前的努力，但不是工作，看起来像这样：

My current effort, which doesn't work, looks like this:

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正确解释的promise。

The input is being debounced correctly; the rx.observable at the start of the JavaScript is returning the search results as an array of strings, and debouncing the input correctly. What I'm not sure how to do is to package the results up into a promise that can be interpreted correctly by ui.bootstrap.typeahead.

推荐答案

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

Ok, I totally missed it in the docs

ng-model-options $ - ng-model的选项（见 ng-model-options指令）。目前支持debounce和getterSetter选项。

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

因此该指令允许您将选项附加到它的 ng-model 非常像'Angular'那样。

So the directive allows you to attach options to it's ng-model very much as plain ol' Angular does.

所以你可以用它来设置你的模型值的debouce，然后调用一个通过 ng-change 指令运行。

So you can then use it to set a debouce to your model value, and then call a function through the ng-change directive.

<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毫秒。

Now your function (sendHttpAfterDebounce) will run 500 milliseconds after you're done typing.

这篇关于ui.bootstrap.typeahead：如何将$ http与去抖动结合起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！