Flex4Fun

The ComboBox control is a child class of the DropDownListBase control. Like the DropDownList control, when the user selects an item from the drop-down list in the ComboBox control, the data item appears in the prompt area of the control.

One difference between the controls is that the prompt area of the ComboBox control is implemented by using the TextInput control, instead of the Label control for the DropDownList control. Therefore, a user can edit the prompt area of the control to enter a value that is not one of the predefined options.

Following Example use new spark ComboBox’s TextInput like autocomplete.

MyVO.as

package vo
{
	public class MyVO
	{
		[Bindable]
		public var label:String;
		public function MyVO(str:String)
		{
			this.label=str;
		}
	}
}

ComboBoxNew1.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
	<fx:Declarations>
		<s:ArrayCollection id="myCbDb"/>

	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"
						  verticalAlign="middle"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;

			import vo.MyVO;
			[Bindable]
			private var arr:Array=["dumb-bell","Boarder","Bicycle","Diving", "Ping-Pong"];

			protected function cb_creationCompleteHandler(event:FlexEvent):void
			{
				this.myCbDb=new ArrayCollection();
				for(var i:int;i<this.arr.length;i++)
				{
					this.myCbDb.addItem(new MyVO(this.arr[i]));
				}
			}

			protected function button1_clickHandler(event:MouseEvent):void
			{
				var obj:MyVO=this.cb.selectedItem as MyVO;
				if(!myCbDb.contains(obj))
				{
					this.myCbDb.addItem(new MyVO(this.cb.textInput.text));
                                        this.cb.textInput.text="";
				}
				this.myCbDb.refresh();
				this.myResult.text=" User Search For: " + this.cb.textInput.text;
			}
		]]>
	</fx:Script>
	<s:Label text="Type something or select then click search"/>
	<s:HGroup>
		<s:ComboBox id="cb"
					dataProvider="{myCbDb}"
					creationComplete="cb_creationCompleteHandler(event)"
					labelField="label"/>
		<s:Button label="Search"
				  click="button1_clickHandler(event)"/>
	</s:HGroup>
	<s:Label id="myResult"/>
	<mx:DataGrid dataProvider="{myCbDb}"/>
</s:Application>

Demo and Source

Originally posted 2010-07-17 05:56:18.