Whatever your reason for using it, here is an example you can play along with. Since we need a data provider, we are going to use JSONPlaceholder – a wonderful fake REST API that you can use for testing just this sort of thing. It is free and easy to use. We can call various different endpoints and the server will report back with fake data. We can use all the verbs and many different sorts of REST call. Great!
Let’s get a big picture first. You are going to be coding three things
- The Search
- The Commit, which you can think of as “any post search processing”
- You will be building a set of records to be passed to the callback function
The search itself, as I mentioned before we will use the JSONPlaceholder service. I have selected the users endpoint, so that I can fire off a query like “‘/users?q='” and pass the text string entered by my user. Hopefully the service will return some people.
The processing and preparation will involve, purely for the purpose of demonstrating the principles, laboriously removing any elements of the data I am not interested in. In fact I am going to delete everything except the name and the email address. The callback function expects a set of data that respects a specific format: “This can either be an array of strings or an array of objects where each object has a text property.” So now you know why I wanted to demonstrate the following
- Renaming a property in the object
- Using the other property, email, in the Commit.
Here is the first part, basically I am :
- getting the text from the user and then passing it to the REST endpoint in the form of a GET.
- The response is coming back at me as a bunch of objects, which I am going to loop through and trim by removing unnecessary stuff.
- Then I call the callback function with the array passed in.
The user can now select one of the values I have returned. When they select their chosen value, the commit will handle it:
In the picture above you can see the value which is passed in actually included the email element from the REST call, so I am free to use it (and any of the other bits I didn’t delete in the previous steps) to populate other attributes, such as the email address.
To help you make sense of all of that, you will find below a video which guides you through the steps and shows the different elements.
Update (December 2017)
I forgot to mention that if your input control is displaying an attribute that is not of type text, this code will not run. It works (perhaps self-evidently, but for completeness I reiterate it) only on text attributes.