Populate typeahead control from httpclient



Peter Bradstreet

Hi David,

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?

Cheers,

Pete

Here is a sample of a sample response:


Samuel

Hello,

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.


Peter Bradstreet
Thanks Sam, That looks like it should do the job.

David Esperalta

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.


Consider to purchase one or more licenses of our products: press here!

Peter Bradstreet
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?
i.e.: Acme Widgets Manufacturing Company
Los Angeles, California
Company #2
New York, New York
Company #3
Buffalo, New York

I tried playing around with line feeds as a special character or html with no luck


David Esperalta

Hello Peter,

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.


Consider to purchase one or more licenses of our products: press here!

Peter Bradstreet
Thanks a million David, I just about had it but was using sloppy html (br instead of br /).
Cheers!
Pete

David Esperalta

Hello Peter,

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. :-)


Consider to purchase one or more licenses of our products: press here!

Peter Bradstreet
Hi, 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. Cheers, Pete

Peter Bradstreet
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. Pete

David Esperalta

Hello Peter,

I hope that also in this case the answer is 42... :-)


Consider to purchase one or more licenses of our products: press here!

Peter Bradstreet
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? Cheers, Pete

Samuel
Hello Peter, YES it is : David kindly improved App Builder to let you select after how many typed characters your TypeaHead control will react :)

Peter Bradstreet
Thanks Sam, 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. Pete

David Esperalta

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! :-)


Consider to purchase one or more licenses of our products: press here!

Peter Bradstreet
Looks like I need to read The Hitchhiker's Guide to the Galaxy. Cheers, Pete

David Esperalta

Me too! :-) :-)


Consider to purchase one or more licenses of our products: press here!

Everybody can read the DecSoft's support forum for learning purposes, however only DecSoft's customers can post new threads. Purchase one or more licenses of some DecSoft's products in order to give this and other benefits.