New Example: Loading data from $http using ui-select as user is typing data

[andyfensham]

I would like an example that demonstrates: I have a big list of data in backend. I am able to use a controller to get the data back but are unable to pass in the currently typed value in my ui-select as I am busy typing

[kentcdodds]

I believe that UI-select supports this kind of behavior. You could probably extrapolate from this example how to utilize that functionality.

[andyfensham]

Hi Kent,

UI-Select supports it but I need to know the value typed into the search as it is being typed. This must then as the user type call the $http service with the data being typed in to bring back the relevant data. We basically have millions of records in the backend and are bringing 10 records at a time as the user types. Can you please assist with this. I have looked at the Async, the bootstrap ui typeahead and the ui-select, but it is all filtering on local data and not remote data as you type.

Thanks

Andy

On Wed, Jul 15, 2015 at 2:20 PM, Kent C. Dodds notifications@github.com wrote:

I believe that UI-select supports this kind of behavior. You could probably extrapolate from this example http://angular-formly.com/#/example/integrations/ui-select how to utilize that functionality.

— Reply to this email directly or view it on GitHub https://github.com/formly-js/angular-formly-website/issues/52#issuecomment-121599897 .

[kentcdodds]

Sorry, I'm busy right now, but I can just say that you can return a promise from expressionProperties so you could make an expression property for 'templateOptions.options' that returns $http.get. I hope that gives you a push in the right direction.

[andyfensham]

Hi Kent,

I have been banging my head on this for some time now. To recap, I am trying to get options from a backend server as the user type something in. Reason is there is a lot of data. Please help. Below is what I have so far.

The strange thing is that if I set the model.Description in field with key 'test', the templateOptions.options fire for field "Description" and the options are set. If I however have a keypress on the "Description" Field, then the $viewValue and $ModelValue is never set when I type into the select box. I do get scope.$select.search, but I can not get the templateOptions.options to fire as a key is pressed.

vm.fields = [ { key: 'test', type: 'input', templateOptions: { label: 'Test', onKeypress: function ($viewValue, $modelValue, scope) { debugger; } //"onKeypress": "model.Description = fc.$viewValue" } }, { key: "Description", type: 'ui-select', templateOptions: { label: 'Description', placeholder: 'Type here..', options: [], 'labelProp': 'Description', 'valueProp': 'Id' , 'onKeypress': "model.Description = fc.$select.search" //function ($viewValue, $modelValue, scope) { // $modelValue.templateOptions.options = vm.refreshdata(scope.$select.search); // model.Description = ""; //}

              },
            expressionProperties: {
                "templateOptions.options": function ($viewValue,

$modelValue, scope) { debugger; var params = { ParameterList: { Description: value } }; var id = 1021 return $http({ url: ' http://localhost/scadservices/api/' + 'TablesV2/' + id + '/data', method: 'GET', params: params }).then(function (response) { vm.data = response.data; return response.data; }); } } }

        ];

[kentcdodds]

Hi, sorry that this has been such a challenge for you. First off, I took your code and it's actually not valid JavaScript. So I'd first recommend making sure that you've got that worked out.

Secondly, it's easier for me to help you if you follow the instructions here: http://help.angular-formly.com

[kentcdodds]

Noticed that you were trying to say $modelValue.templateOptions.options = that's not correct at all... In fact, the entire onKeypress that you're doing probably doesn't need to happen at all. I believe that the expressionProperties that you have specified there should work on its own. Assuming the data that comes back is correct.