Populate typeahead control from httpclient

Take a look at our YouTube channel and subscribe to be notified about new videos!

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Take a look at some frequently asked questions about us and our products!

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

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:

{
"response": [
{
"Name": "ABC Marina"}
,
{
"Name": "Your Marina"}
,
{
"Name": "Another Marina"}
]
}

Samuel Vanneste

Hello,

The Typeahead control's items are stored in an array. From the HttpClient's success event, you could do something like:

ObjectGetProp "[HttpClient1.Response]" "response" "[tmpArray]"

ArrayLength "[tmpArray]" "[arrayLength]"
Dec "[arrayLength]"

Loop "0" "[arrayLength]" "[loopLevel]"

NewObject "[tempObject]"
ArrayGetItem "[tmpArray]" "[loopLevel]" "[tempObject]"
ObjectGetProp "[tempObject]" "Name" "[Result]"

ArrayPush "[Typeahead1.Items]" "[Result]"
EndLoop

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.

DecSoft

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.

Purchase one or more licenses of our products if they are useful to you!

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

DecSoft

Hello Peter,

Take a look at the below modified "TypeAhead" sample: I hope that more or less can suit what you need:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.41">
  <App>
    <ID>com.appbuilder.typeahead</ID>
    <Name>Typeahead</Name>
    <ShortName>Typeahead</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Otra app the App Builder</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2015-08-02T12:00:00.000</Created>
    <Modified>2019-06-17T17:44:23.797</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General>
        <OverScroll>0</OverScroll>
      </General>
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>NuevaVista1</Name>
      <Animation>fadeIn</Animation>
      <Controls>
        <Control Role="20006">
          <Name>Typeahead1</Name>
          <Top>112</Top>
          <Left>32</Left>
          <Width>248</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Items>
            <![CDATA[Company #1<br>Los Angeles, California
Company #2<br>New York, New York
Company #3<br>Buffalo, New York
]]>
          </Items>
          <PlaceHolder>USA state</PlaceHolder>
          <ItemClickEvent>
            <![CDATA[
StrReplaceAll "[Typeahead1.Value]" "<br>" " - " "[Typeahead1.Value]"
]]>
          </ItemClickEvent>
        </Control>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>184</Top>
          <Left>32</Left>
          <Width>248</Width>
          <Height>104</Height>
          <Html>
            <![CDATA[<strong>Value:</strong> [Typeahead1.Value]]]>
          </Html>
        </Control>
        <Control Role="40001">
          <Name>AppComment</Name>
          <Top>40</Top>
          <Left>336</Left>
          <Width>296</Width>
          <Height>88</Height>
          <Text>
            <![CDATA[This app sample show us how to use the Typeahead control, which allow us to show to the user a list of possible values in order to be selected and assigned to the control value variable.]]>
          </Text>
        </Control>
        <Control Role="6002">
          <Name>Label1</Name>
          <Top>88</Top>
          <Left>32</Left>
          <Width>248</Width>
          <Height>20</Height>
          <Text>USA state</Text>
          <Input>Typeahead1</Input>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.41 (6/13/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

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.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

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

DecSoft

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

Purchase one or more licenses of our products if they are useful to you!

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

DecSoft

Hello Peter,

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

Purchase one or more licenses of our products if they are useful to you!

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 Vanneste

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

DecSoft

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

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

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

DecSoft

Me too! :-) :-)

Purchase one or more licenses of our products if they are useful to you!

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.