CODEWITHSUNDEEP
apache-flexactionscript
shci
shci

Reputation: 195

Flex/Actionscript textfield autocomplete like interface

I would like to implement autocomplete-like textfield on flex.

The implemented AS3 autocomplete needs to have a list of predefined strings.

However, in my case I do not have a predefined list, and it depends what the user enters.

And another feature, is that it should wrap the text in a visual component. As is macbook mail app, when you enter an email address, it automatically changes the name in a blue oval. And when you press back space it deletes the whole email address.

I would like to combine these features.

If a user, enteres 'a_1 + b_1', while typing a_1 should be automatically changed to a oval with the label of a_1.

Are there any source codes I could take a look for these features?

Upvotes: 1

Views: 1672

Answers (2)

JeffryHouser
JeffryHouser

Reputation: 39408

If you Google around, you'll find plenty of samples of AutoComplete components built in Flex. I personally like the Flextras AutoComplete Component one because I built it. It is open source, and the full source code is available under an Apache license.

You can provide a list of "predefined" Strings via a dataProvider, just like any other Flex list based Component. I'm not sure what you mean by "The use must provide the predefined list." But, if you wanted to store a list of user entered options and let it grow over time, you'll have to write your own code for storing those values long-term.

Deleting the whole 'input' based on keypress is not a common use case for an AutoComplete; but I believe Hillel Coren's AutoComplete supports that as part of it's multiple-select functionality.

Upvotes: 1

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

In flex 4.5 it's only a few lines of code to build one with the combobox. There's also a great component by Hillel Coren http://hillelcoren.com/flex-autocomplete/ but it doesn't work well with 4.5 (it does work with 3 and 4).

Example of a quick n' dirty autocomplete.

package autoCompleteExample
{
import mx.collections.ICollectionView;
import mx.collections.IList;    
import spark.components.ComboBox;
import spark.events.TextOperationEvent;

public class AutoCompleteExample extends ComboBox
{   
    override protected function textInput_changeHandler(event:TextOperationEvent):void{
        super.textInput_changeHandler(event);
        ICollectionView(dataProvider).refresh();
    }       
    override public function set dataProvider(value:IList):void{
        ICollectionView(value).filterFunction = defaultFilterFunction;
        super.dataProvider = value;
    }       
    private function defaultFilterFunction(item:Object):Boolean{
        return (textInput.text.toLowerCase() == String(item[labelField].toLowerCase()).substr( 0, textInput.text.length ));
    }
}
}

Now you just need to make sure you add a label field. You could use the "itemToLabel" function I think as well.

Upvotes: 0

Related Questions