====== Combo Box ======

{{ :scripting:dialogs:combobox.png|ComboBox example}}
One line control for selecting values from fixed or free value list. Style of the list can be controlled by filling //selected_value// (free list) or //selected_index// (fixed list) attributes. If mode is not specified explicitly by one of mentioned attributes, //free list// mode is assumed. 


===== Properties =====

^ Property     ^ Default Value   ^ Description    ^
| **id**    | empty | id (name) of the script data object associated with control |  
| **align**    | stretched | [[scripting:dialogs:align|Alignment]] of the control |  
| **required**    | false | required property of the control (if control is initial, "positive" [[scripting:dialogs:button|buttons]] are disabled) |  
| **minwidth**    | 0 | Minimum width, in characters of the list box control |  
| **selected_value**    | empty | Initial value of the control. May be not in list of provided items. |  
| **selected_index**    | empty | Index of selected item. Indicates fixed list. |  
| **cuebanner**    | empty | Prompt shown in control background if no text is entered |  
| **autocomplete**    | empty | [[scripting:dialogs:autocomplete|Autocomplete]] mode |  


===== Items =====
Combo Box is filled by //Items//, defining value set for selection.

==== Item ====

^ Property     ^ Default Value   ^ Description    ^
| **text**    | empty | Item text |  

<note tip>For dynamic item list one can use dynamic creation of the dialog XML. See example for [[scripting:dialogs:multi_listbox|multi selection listbox]].</note>
===== Example =====

<file javascript combobox.hejs>
var varStorage = new Storage(); 
var dialog_template = 
'@<dialog title="Test Dialog" resizing="both"> \
   	<group> \
	   	<paragraph text="Select by Index:" minwidth="15"/> \
		<combobox id="byIndex" selected_index="2" minwidth="25"> \
			<item text="Very Small"/> \
			<item text="Small"/> \
			<item text="Normal"/> \
			<item text="Large"/> \
			<item text="Very Large"/> \
	   	</combobox> \
	</group> \
   	<group> \
	   	<paragraph text="Select by Value:" minwidth="15"/> \
		<combobox id="byValue" selected_value="None" minwidth="25"> \
			<item text="Very Small"/> \
			<item text="Small"/> \
			<item text="Normal"/> \
			<item text="Large"/> \
			<item text="Very Large"/> \
	   	</combobox> \
	</group> \
	<group> \
	   	<paragraph text="Autocomplete:" style="required" minwidth="15"/> \
		<combobox id="required" minwidth="25" required="true" cuebanner="Enter URL" autocomplete="url"> \
			<item text="http://www.google.com"/> \
			<item text="http://www.bing.com"/> \
			<item text="http://www.yahoo.com"/> \
	   	</combobox> \
	</group> \
   	<group minwidth="75" minheight="23" uniform="true" align="center"> \
   		<button title="&amp;OK" default="true" returnval="ok"/> \
   		<button title="&amp;Cancel" returnval="cancel"/> \
   	</group> \
</dialog>@';

Output().writeln("Dialog 4 returns: " + dialog(dialog_template, varStorage));
Output().writeln("By Index selection: " + varStorage.byIndex);
Output().writeln("By Value selection: " + varStorage.byValue);
Output().writeln("Autocomplete selection: " + varStorage.required);
</file>