Skip to main content
maximilianf46353140
Known Participant
June 14, 2017
Answered

Searchable text entry box / drop down menu: is that possible?

  • June 14, 2017
  • 3 replies
  • 1268 views

Hi everyone,

I want to create a text entry boy / drop down menu that reacts dynamically to text input from the user. 

Does anyone know how to create a text entry box that gives the user suggestions of possible choices depending on the text that has been typed in?
Or a drop down menu with all possible choices, which can be automatically filtered depending on user input in a textbox?

The following site shows what I have in mind:


https://stackoverflow.com/questions/20223044/select2-start-with-input-field-instead-of-dropdown

 

I would be very happy about any tip - even if it brings me just a little bit closer to a solution

Best regards
Max

This topic has been closed for replies.
Correct answer petern33480613

sdwarwick,

Yes, that is exactly the way I use it.

I made an external HTML page that links with the PHP and XML and returns the results on that same HTML page.

Then I put a Web Object on the slide that points to my external HTML page.

Its best to test it from the server, not in Captivate.

For anyone who want to try it, use the exact code shown in the PHP AJAX Live Search  page, and then start to tweak it to suite your own needs.

Peter

3 replies

Participating Frequently
June 16, 2017

Note that it isn't necessary to actually set up a server/ajax interaction.  The web object itself can contain all of the suggestions in the javascript file directly.

 This approach is far more self-contained, as it doesn't depend on setting up an AJAX url, or availability of PHP.  I'd probably start with that first, and only move to a real AJAX type interaction if there was something dynamic, such as access to a database.  

Participating Frequently
June 16, 2017

I'd approach this problem perhaps differently.  Captivate enables embedding of an html element, called a "web object"  onto any slide.   The web object can be anything, including a javascript-driven or ajax-driven text entry box with suggestions.    The development of this function can be done entirely outside of captivate.   Captivate includes web objects as an IFRAME.  

IFRAMESs have the wonderful capability that, if the web object is hosted on the same server as the course itself,  the IFRAME can communicate directly  - and bidirectionally  - with it's parent using javascript.   The operational strategy would be that,  once a user has completed the text entry,  the parent ( captivate course ) can simply check to see what value was added and use it as needed.   You can even send "events" from the IFRAME up to the parent to indicate that the user has added/changed something.  

The power of web objects is one of the most underappreciated capabilities in captivate.  

sdwarwick@elearningocean.com for more information. 

petern33480613Correct answer
Inspiring
June 16, 2017

sdwarwick,

Yes, that is exactly the way I use it.

I made an external HTML page that links with the PHP and XML and returns the results on that same HTML page.

Then I put a Web Object on the slide that points to my external HTML page.

Its best to test it from the server, not in Captivate.

For anyone who want to try it, use the exact code shown in the PHP AJAX Live Search  page, and then start to tweak it to suite your own needs.

Peter

RodWard
Community Expert
Community Expert
June 14, 2017

Captivate's interactivity is event-based.  The Text-Entry Box object only has a few events you can use.  Each and every keystroke entered IS written to the associated User Variable attached to that Text Entry Box, but you don't have the option of executing an Action on each keystroke.

To achieve the kind of functionality you want would require some fancy JavaScript coding, probably requiring event listeners that reacted to each user keystroke and then ran custom functions to work out what to show based on the user's input.

maximilianf46353140
Known Participant
June 14, 2017

Hi Rod,

I will need such a feature for sure - it's one of the most important features of this project. 

Please let me know if someone knows a widget or java script code for such a feature.

 

Best regards from Munich, Germany
Max

RodWard
Community Expert
Community Expert
June 14, 2017

I don't know of any widget that is written specifically to do what you want, but if your output is going to be HTML5, you might want to investigate the CpExtra HTML5 widget.

http://www.infosemantics.com.au/adobe-captivate-widgets/cpextra/help

It does allow you to create your own custom event handlers in Captivate without having to resort to JavaScript.  But as to how you would achieve your specific result with the drop-down menu, I think you may need to talk to Tristan the widget's creator.  He's a JavaScript guru.