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

[yusin]

+1

[NielsGregers]

+1

[asm0dey]

👍

Waiting for this to be implemented - unable to migrate.

[jpmckearin]

+1

[tushar-borole]

+1

[arjundas]

+1

[PavelKonon]

+1

[Xepe]

👍

[gouxlord]

+1

[radyz]

+1

[simkessy]

+1

[zsapkagy]

👍

[tadchristiansen]

+1

[soichih]

+1

[alexcreasy]

+1

[dolzenko]

👍

[ivan206]

+1

[mpochron]

-(-1)

[fynnfeldpausch]

+1

[daric81]

+1

We use the deprecated ui-select2 and cant migrate without this feature

[pliashkou]

+1

[betonetotbo]

Hi guys!

I was in the same trouble, i solved using this:

https://jsfiddle.net/betonetotbo/0yfhe7pf/

[doubaokun]

+1

[lky1001]

@betonetotbo very good solution for me! thanks

[wufangjian]

+1

[felipexw]

+1

[unrealsolver]

👍

[arjundas]

👍

[sfreeland]

Pretty please?

[jacek213]

+1

[pencilcheck]

+1

[robsonrosa]

+1

[pencilcheck]

An example using ui-select-infinity plugin: http://plnkr.co/edit/p6Dt3yvTq40Vn56AKiqC?p=preview

I think it can be simplified if it is merged with ui-scroll. Which i'm going to try soon.

[jacek213]

Yesterday I've also introduced ui-select-infinity into my app. It works fine except sometimes it throws Cannot read property 'getBoundingClientRect' of undefined exception. If someone encounters the same problem - check my fork which solves it: hyzhak/ui-select-infinity#11

[sjahongir]

Great! +1

[akaash2512]

I am using ui-select2 dropdown with infinite scroll But search feature is not working with it. Can anyone please help ?

[cppmyjob]

+1

[Condor2708]

Any state of situación for this request? Is there any documentación how ti solve this?

[dmarafetti]

+1

[jamespsterling]

+1

[Roycohen]

+1

[condereis]

+1