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.

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:

Initial load of UIselect will not have any data.
User types 3 chars
Fire a filter(controller scoped) which calls REST API with 3 chars
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.

Can you provide some code of where you are at? – Jeremy Ninnes Nov 21 '14 at 01:05 — Jeremy Ninnes, Nov 21 '14 at 01:05

score 6 · Accepted Answer · answered Nov 23 '14 at 07:07

6

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
}

answered Nov 23 '14 at 07:07

harishr

17,807
9
78
125

Thanks, bit I have an issue when I do select match like below and my UIselect is not multiple {{$item.Product_Description}} ({{$item.Product_Code}}) I see open/close bracktes in dropdown like "()" but when I remove Product_code from select match its looks good but doesn't select in the format I want , need inputs – Sunil Vurity Nov 24 '14 at 01:10

sdhd · Answer 2 · 2016-06-04T13:55:28.667

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()
    })
  }
}

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

2 Answers2