Changing the Highlight of our AutoCompleteComboBox
A prospect approached me about our AutoCompleteComboBox.
I noticed that the highlight of the AutoComplete text is done in bold. That means if I am using a custom font I have to embed both the normal and the bold font for the highlight to show up.
The highlighting in our Flex AutoComplete Component is done using a the htmlText property of a label. If you are embedding a custom font, and the bold version of that font is not available, you won't see the highlight. This is confirmed in the bold section of the Flex htmlText Documentation.
ItemRenderers make this aspect of our AutoCompleteComboBox completely customizable. I demonstrated this in one of the early Flextras Friday Lunch episodes. You can also view the sample and the source code. The sample is downloadable as part of our free developer edition.
The custom itemRenderer is an extension of the label. It listens to the dataChange event and modifies the label's htmlText property using some regEx to find the typed text. I'll show you the code:
var ld : AutoCompleteListData = AutoCompleteListData(this.listData)
var label : String = data.FirstName + ' ' + data.LastName + ' ' + data.Email
if(ld.typeAheadText != ''){
var regEx : RegExp = new RegExp(ld.typeAheadText ,'ig');
this.htmlText = label.replace(regEx , '<b>$&</b>');
} else {
this.htmlText = label;
}
}
First, the custom renderer gets the AutoCompleteListData. This is an extension of the listData class.
The code then generates the string for our label. The AutoComplete's default renderer supports the labelField and labelFunction, but this custom renderer sample accesses properties directly in the data object.
The regex uses the i flag, which tells the search to ignore the case. The replace tag function just encloses our typed text with bold. You could use different colors, or underlines as alternatives to bold. Or you could roll your own.
The prospect went on to ask if there was a way to select every instance of the type ahead text. That is done with a simple mod of our itemRenderer. Just add the 'g' flag tot he regex expression, like this:
I updated the sample to include the multiple selection:
