Give us a call 203-379-0773
Check out our Angular Book Series.

AutoCompleteComboBox: FirstOnly Filter

At the last Flextras Friday Lunch, I demoed how we can use a custom filter function on our AutoCompleteComboBox Flex component to modify the way the AutoComplete functionality will work.

As you probably know, the dataProvider on the Flex list based components are turned into a ListCollectionView. The ListCollectionView defines the sorting and filtering functionality of the collection classes.

The AutoCompleteComboBox's AutoCompleteFilterFunction is a parallel to the ListCollectionView's filterFunction. It allows for a lot of flexibility when customizing how AutoComplete functionality works.

The default autoCompleteFilterFunction will look for the typeAheadTextValue in your item's display label and if it finds the appropriate text, will keep the result in your filtered dataProvider.

I decided I wanted to build a custom autoCompleteFilterFunction to only select items if your type ahead text was the at the beginning of the display label. This is the custom filterFunction:

protected function firstOnlyFilter ( item:Object):Boolean{
var label : String = item.label;
if(label.toLowerCase().search(accb.typeAheadTextValue.toLowerCase()) == 0){
return true;
}
return false;
}

The filter Function gets the label text from our item, converts it to lowercase and compares it to the type-ahead text that the user entered. If the text is found at the front of the string, or position 0, it keeps it in the result set. Otherwise, it is removed.

Take a look at the source code, or full screen demo. A smaller example is embedded here:

The default AutoComplete functionality is on top, with the First Only one on bottom.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)