35

I am using angular UI select.

https://github.com/angular-ui/ui-select

I looked around the demo's available at this plunkr

I want to fetch data from a remote service. Every time user types something into the text field. I want to fetch data from remote service with results filtered based on input value.

I have written a web service and web service is working fine.

How can I use angular ui select to fetch data from remote service ?

Currently I am following simple example from demo 

  <ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

availableColors is a predefined array. I don't want to define data array beforehand.

I have been looking around the Internet for any possible documentation or tutorial but not able to find anything useful.

Improve this question

2 Answers 2

Reset to default
58

In your example, at first you must initialize your availableColors as an empty array:

$scope.availableColors = [];

Then, you can write your simple service with $http:

$http.get('data.json').then(
  function (response) {
    $scope.availableColors = response.data;
    $scope.multipleDemo.colors = ['Blue','Red'];
  },
  function (response) {
    console.log('ERROR!!!');
  }
);

So, now you can use this code without pre-defining your availableColors by some values.

Demo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

In this example I added file data.json which contains an array of colors.

It's a very simple example, but I hope that it will help you. Changes start from line 118 in file demo.js.

Edit

If you want to dynamically update your list of choices - you can use the attributes refresh and refresh-delay of the ui-select-choices directive.

The first attribute, as you can guess, gets function like

refresh="funcAsync($select.search)"

which will be called every time you type anything. And you can use the second attribute as

refresh-delay="0"

As you can guess it is used for set delay of calling refresh function in milliseconds. By default this value is set to 1000.

Demo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

I updated my plunk, so I decided not to write own backend functions. That's why you can check it works by simply typing red in the first ui-select field - values will be got from another .json file - data1.json.

Hope, it will help you.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I want to call the service everytime user input some values in input box and the service will return the filtered result based on the value input in text box. This is necessary if I have more records as fetching all records at once is not good solution
@Syed: I updated my answer, so you can see that ui-select performs 2 attributes of <ui-select-choices> </ui-select-choices> directive: refresh and refresh-delay
In your function, you should return the $http promise so ui-select knows when it's resolved.
-3

Since you said:

I want to call the service everytime user input some values in input box and the service will return the filtered result based on the value input in text box.

I believe you should $watch the input value for change, and query the remote source when the value is changed

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.