Infinite scrolling with remote data available?

[doranen]

Don't see a way to provide the data necessary to enable infinite scrolling using query

[dimirc]

Can you elaborate more on this?

[doranen]

from the select2 docs:
Infinite Scroll with Remote Data
Select2 supports lazy-appending of results when the result list is scrolled to the end. In order to enable the remote service must support some sort of a paging mechanism and the query function given to Select2 must take advantage of it. The following example demonstrates how this can be set up. Search for some keyword and then scroll the result list to the end to see more results load:

The deprecated version of this angular-select2 plugin allows it

[mtraynham]

+1
The deprecated angular-ui-select2 component has the query function, which would be triggered by either a change in search text or by scrolling to the end of the choices container (if the previous results indicated more: true). My usecase is a bit different though, as I used it for performance reasons. I already had the data client side, but 1000+ DOM elements for choices was a burden.

Here's an example of how I used the query function to page values ($scope.values) into the DOM:

    $scope.select2Options = {
        query : function (query) {
            var data = {results: [], more: false};
            // Reduce all values to what's needed
            if ($scope.values) {
                // Filter search
                data.results = $scope.values.reduce(function (previous, current) {
                    if (query.matcher(query.term, current.text)) {
                        previous.push(current);
                    }
                    return previous;
                }, []);
                // Page
                if (data.results.length > query.page * $scope.limit) {
                    data.more = true;
                }
                data.results = data.results.splice((query.page - 1) * $scope.limit, $scope.limit);
            }
            query.callback(data);
        },
        multiple: true
    };

<input type='hidden' ui-select2='select2Options' ng-model='filters'/>

Granted, another solution in my case, is just don't render all the options at the same time...

[Condor2708]

+1 ... It is a great characteristic of the select2 component

[MikeABentley]

+1 I need to use the select2 component to leverage the remote data functionality in my angular based application

[masscrx]

+2

[MikeABentley]

Ended up rolling my own directive using the select2 control. My primary need was the remote data. Perhaps I'll swap in this control when remote data is supported.

[Wangor]

+1

[klmdb]

+1

[kiwipiet]

+1

[ephraimm]

+1

[MattShrider]

+1