Remote loading of data using angular ui-select2

[manibhasuri]

Can you please help in how to use ui-select2 typeahead functionality that loads on user typing on text box.

I am not able to use the transport property

[deedarb]

i need this feature too!

[gkop]

This angular integration doesn't get in the way of this feature of select2 - https://ivaynberg.github.io/select2/#ajax

Basically you apply the directive to an <input> and send in ajax options according to the above link.

[Prateek479]

I tried the following but its not working. How should I be hitting the remote url?

  <input type="hidden" id="article-tags" ui-select2="select2Options" ng-model="selectedTags" data-placeholder="Pick a number" ng-required="true" style="width:300px"/>


    $scope.select2Options = {
      'multiple': true,
      'allowClear': true,
      'simple_tags': true,
      'tags': [] // Can be empty list.
    };


$(document).ready(function() {
  $('#article-tags').select2({
    // minimumInputLength: 2,
    ajax: {
      url: 'http://localhost:3000/fetch/tags',
      dataType: 'json',
      data: function(term, page) {
        return {
          q: term
        };
      },
      results: function(data, page) {
        console.log(data);
        return {
          results: data
        };
      }
    }
  });
});

[pasine]

This is what I did to get the results from the remote server:

View

<input type="hidden" id="users" 
    ui-select2="select2Options"
    ng-model="user.name"
    data-placeholder="Pick a user"
    ng-required="true" style="width:300px" />

Controller

    $scope.select2Options = {
       ajax: {
        url: "/api/users",
        dataType: 'json',
        data: function (term, page) {
        return {
          q: term, // search term
          page_limit: 10,
          };
        },
        results: function (data, page) {
          return {results: data};
          }
        },
        formatResult: function(object, container, query) {
          return object.name;
        }
    }

This works fine and the data are correctly retrieved from the server. The problem is, I am not able to select any result. Clicking on a name or try to move with the arrows don't do anything. Any suggestion?

[sunilmunikar]

if you don't have 'id' key in your return data, you need to pass a key as 'id' with function returning unique value of the data. $scope.selectionOption = { id: function(data){ return data.code } }

[melino]

Did anyone had success here?

[ldlsegovia]

I did'nt use ui-select2 to resolve, but this could help.

(function() {
    'use strict';

    angular
        .module('App.directives')
        .directive('ajaxSearchInput', Directive);

    Directive.$inject = [];

    function Directive() {
        return {
            template: '<input style="margin-left:0px"/>',
            replace: true,
            restrict: 'E',
            require: 'ngModel',
            scope: {
                url: '=',
                selectedItem: '=',
                textAttr: '@',
                queryParam: '@',
                containerCssClass: '@',
                minimumInputLength: '@'
            },

            link: function(_scope, _element) {
                var selectOptions = {
                    minimumInputLength: _scope.minimumInputLength || 3,
                    containerCssClass: _scope.containerCssClass,
                    initSelection: function(_elem, _callback) {
                        if(_scope.selectedItem) {
                            var data = {
                                id: _scope.selectedItem.id,
                                text: _scope.selectedItem[_scope.textAttr] || ''
                            };

                            _callback(data);
                        }
                    },
                    ajax: {
                        url: _scope.url,
                        quietMillis: 250,
                        dataType: 'json',
                        data: function(term) {
                            var d = {};
                            d[_scope.queryParam || 'q'] = term;
                            return d;
                        },
                        results: function(_data) {
                            return {
                                results: _.map(_data, function(_item) {
                                    var d = {
                                        id: _item.id,
                                        text: _item[_scope.textAttr]
                                    };

                                    return d;
                                })
                            };
                        }
                    }
                };

                $(_element).select2(selectOptions);
            }
        };
    }
})();

<ajax-search-input
  url="api/sites/123654/access-cards" 
  text-attr="code"
  container-css-class="span2"
  query-param="code_starts_with"
  selected-item="worker.accessCard"
  ng-model="worker.accessCardId">
</ajax-search-input>

selected-item: is the server value containing not only the selected item id: { "id": 4, "code": "jisvdh" }. (required on initSelection) text-attr: is the attribute to map with text attribute required by select2. ng-model will hold the id of the selected item only. Not the whole object.