AngularJS UISelect - call REST API on search ( Min 3 chars )

Question

Im using Angular-UISelect to enable search for my dropdown.

Now i have a challenge.

1. Need to create a controller level filter ( scoped to controller not app ) that takes 3 min characters from user and hit REST Api based on 3 chars and bind the result from API back to UISelect.

Steps:

1. Initial load of UIselect will not have any data.
2. User types 3 chars
3. Fire a filter(controller scoped) which calls REST API with 3 chars
4. bind REST API response to UISelect.

when i looked at UISelect demo,it performs search on already bound data.

Need some inputs on how to go about it.

Answer 1

you need to use

<ui-select-choices repeat="address in addresses track by $index"
         refresh="refreshAddresses($select.search)"
         refresh-delay="0">

and in this function refreshAddresses you can put your logic

$scope.refreshAddresses = function(input) {
    if(angular.isUnDefined(input) || input == null) return [];
    if(input.length < 3) return [];
    return $http.get() //your logic
}

Answer 2

i had excatly the same problem. I found this:

http://pastebin.com/dcfE07pg

# UI-SELECT
<ui-select on-select="clearCountries()" ng-model="customer.country_id" theme="bootstrap">
<ui-select-match placeholder="Wpisz minimum 3 znaki...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices refresh="checkCountry($select.search)"  refresh-delay="500" repeat="country.id as country in countries | filter: $select.search">
<div ng-bind-html="country.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>

# CONTROLLER FUNCTION
$scope.checkCountry = function(country_name) {
  if (country_name.length >= 3){
    DataFactory.search('countries', country_name, 1, 20).then(function(result) {
      $scope.countries = result.plain()
    })
  }
}