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 [email protected]
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
#52 (comment)
.

[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.