User Guide

180 ComboBox component
Description
Property; indicates whether the combo box is editable (true) or not (false). In an editable
combo box, a user can enter values into the text box that do not appear in the drop-down list.
If a combo box is not editable, you cannot enter text into the text box. The text box displays
the text of the item in the list. The default value is
false.
Making a combo box editable clears the combo box text field. It also sets the selected index
(and item) to
undefined. To make a combo box editable and still retain the selected item, use
the following code:
var ix:Number = myComboBox.selectedIndex;
myComboBox.editable = true; // Clears the text field.
myComboBox.selectedIndex = ix; // Copies the label back into the text field.
Example
With a ComboBox component instance my_cb on the Stage, the following ActionScript
creates a combo box list and two listeners. The first listener handles clicking the “Add new
item” label to make the combo box field editable. The second listener handles the user
pressing the Enter key to add their entry to the combo box list:
// Add items to the combo box list.
my_cb.addItem({data:1, label:"First Item"});
my_cb.addItem({data:2, label:"Second Item"});
my_cb.addItem({data:-1, label:"Add new item..."});
// Respond to the user clicking "Add new item".
function changeListener(evt_obj:Object) {
if (evt_obj.target.selectedItem.data == -1) {
evt_obj.target.editable = true;
} else if (evt_obj.target.selectedIndex != undefined) {
evt_obj.target.editable = false;
evt_obj.target.setFocus();
}
}
my_cb.addEventListener("change", changeListener);
// Respond to the user pressing the Enter key after adding a new item name.
function enterListener(evt_obj:Object) {
if (evt_obj.target.value != '') {
evt_obj.target.addItem({data:'', label:evt_obj.target.value});
}
evt_obj.target.editable = false;
evt_obj.target.selectedIndex = evt_obj.target.dataProvider.length-1;
evt_obj.target.setFocus();
}
my_cb.addEventListener("enter", enterListener);