I am working on a registration wizard that interfaces with a web application and would like to provide a typeahead control where the user enters in the name of a marina but the available marinas are returned from a rest service by the web application. I was wondering what the best approach is to do this. I see that in your typeahead sample, the list of items is set at design time. Is there a way to populate this dynamically?
Here is a sample of a sample response:
The Typeahead control's items are stored in an array. From the HttpClient's success event, you could do something like:
As you can see, your JSON response is an Array containing Objects each one with a Prop named "Name". We have to parse them.
That looks like it should do the job.
Yes; I think Samuel is right (thanks for your help here, sir). What the Typeahead control expected is an Array of strings, and not an Array of objects, so we must prepare the appropriate Array to be used from our Array of objects.
P.S. Just to add something... if we can provide to the app the right Array... instead of Array of object... that's better, because we no need to do it in the app itself. In other words, if we can do it in the server's side, better. If not, we can always do it in the app, of course.
Hi, I have this working well however I would like to populate the typeahead dropdown list with a string that contains a concatenated string containing the name, city and state. (i.e. Acme Widgets Manufacturing Company, Los Angeles, California).
The issue is that the string is too long to show in the list, is there a way to introduce a line feed after the name but before the city?
Acme Widgets Manufacturing Company
Los Angeles, California
New York, New York
Buffalo, New York
I tried playing around with line feeds as a special character or html with no luck
Take a look at the below modified "TypeAhead" sample: I hope that more or less can suit what you need:
Copy the above code and save it in a file like "MyApp.ab". The open that app file with DecSoft App Builder and run it.
Thanks a million David, I just about had it but was using sloppy html (br instead of br /).
When I read your post I supose that maybe the HTML must be in fact XHTML, but, in fact I try with "br" and also works... anyway, what matter here is that you got the point. :-)
Actually, I was a little quick to assume that was the issue as I found the same thing. I now see the script that you added to strip out the br / and replace it with a dash after the user selects the item as the typeahead control does not parse html tags but the dropdown list does.
Just a quick question. If you start typing in your example and type 'b' or 'br', then the dropdown list shows the br / in the dropdown list otherwise, it parses it properly. I was wondering whether there was a way to limit the dropdown list to not show any returns until the user has entered 3 or more characters? That way, they would never see this issue, also, the returned list would be smaller and more useable.
Sorry, I don't understand your answer. Is there a way to prevent the typeahead control from firing the dropdown list until at least 3 characters have been typed?
YES it is : David kindly improved App Builder to let you select after how many typed characters your TypeaHead control will react :)
I didn't notice the new version so I am thrilled that once again David has gone above and beyond.
Thanks to both of you.
Hello to all,
Sorry to confuse you, Peter... my humor sense and my english... sorry for that. The point is that the answer of everything is 42, as you probably know... (google around this if you wanted :) and the new release of App Builder (which allows to specify a minimum length of characters to show the TypeAhead list) is also the release 42 of the year. I don't know why I want to made a joke around this!
Thanks for your answer Samuel! :-)
Looks like I need to read The Hitchhiker's Guide to the Galaxy.
Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.