0

I would like display in md-autocomplete large list (around 50 000 records). Autocomplete directive uses mdVirtualRepeat which provide infinity scrolling. I couldn't find way to pass md-on-demand option. Maybe someone find way to do that. I really appreciate any help you can provide

UPDATE

I forget to share the code. I haven't problem with code performance but when list is rendering app is not responsive. In my opinion problem is in virtual rendering which still try to render whole list instead of visible part.

PS. I know $scope is bad but I'm using this example in angular-formly.

JS

  $scope.to.options = [];


    $scope.ctrl = {
        selectedItem: null,
        isDisabled: $scope.to.disabled,
        noCache: $scope.to.noCache,
        placeholder: $scope.to.placeholder || 'Wybierz element',
        minLength: $scope.to.minLength || 0,
        querySearch: querySearch,
        searchTextChange: searchTextChange,
        selectedItemChange: selectedItemChange,
        delay: $scope.to.delay || 350,
        options: []
    };

    if ($scope.to.dictId) {

        dictionariesRepository.get($scope.to.dictId).then(function (res) {
            $scope.ctrl.options = createOnDemandObject(res.Data.map(function (elem) {
                return { value: elem[$scope.to.FieldVal], name: getLabel($scope.to.FieldFormula, elem) };
            }));
            var val;
            if ((val = getValue())) {
                var selected = $scope.ctrl.options.filter(function (elem) {
                    return elem.value == val;
                })[0];
                if (selected) {
                    $scope.ctrl.selectedItem = selected;
                }
            }
        });
    }

    function createOnDemandObject(list) {
        return {
            list: list,
            getLength: function () {
                return this.list.length
            },
            getItemAtIndex: function (index) {
                return this.list[index];
            }
        }
    }
    function searchTextChange(text) {
        //$log.info('Text changed to ' + text);
    }

    function selectedItemChange(item) {
        var getter = $parse($scope.options.key);
        var setter = getter.assign;
        setter($scope.model, item[$scope.to.FieldVal]);
    }

    function querySearch(query) {
        var options = $scope.ctrl.options;
        return query ? options.filter(createFilterFor(query)) : options;
    }

    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);

        return function filterFn(elem) {
            return (elem.name.indexOf(lowercaseQuery) === 0);
        };

    }

HTML

<md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
                 md-delay="ctrl.delay"
                 md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" 
                 md-items="item in ctrl.querySearch(ctrl.searchText)"
                 md-on-demand
                 md-item-text="item.name" md-min-length="ctrl.minLength" placeholder="{{ctrl.placeholder}}">
    <md-item-template>
        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.name}}</span>
    </md-item-template>
    <md-not-found>
        Nie znaleziono pasującego wyniku dla "{{ctrl.searchText}}".
    </md-not-found>
</md-autocomplete>
Rithala
  • 1
  • 1
  • 2

0 Answers0