Flex / Actionscript текстовое поле автозаполнения, как интерфейс

Question

Я хотел бы реализовать похожее на автозаполнение текстовое поле на flex.

В реализованном автозаполнении AS3 должен быть список предопределенных строк.

Однако в моем случае у меня нет предопределенного списка, и это зависит от того, что пользователь вводит.

И еще одной особенностью является то, что он должен обернуть текст в визуальный компонент. Как и почтовое приложение macbook, при вводе адреса электронной почты оно автоматически меняет имя в синем овале. И когда вы нажимаете клавишу пробела, он удаляет весь адрес электронной почты.

Я хотел бы объединить эти функции.

Если пользователь вводит 'a_1 + b_1', то при наборе a_1 следует автоматически менять его на овал с меткой a_1.

Есть ли исходные коды, на которые я мог бы обратить внимание на эти функции?

Answer 1

Если вы пользуетесь Google, вы найдете множество примеров компонентов автозаполнения, встроенных в Flex. Мне лично нравится компонент Flextras AutoComplete , потому что я его создал. Это открытый исходный код, а полный исходный код доступен по лицензии Apache.

Вы можете предоставить список «предопределенных» строк через dataProvider, как и любой другой компонент на основе списка Flex. Я не уверен, что вы подразумеваете под "Использование должно предоставить заранее определенный список". Но если вы хотите сохранить список введенных пользователем опций и позволить ему со временем расти, вам придется написать собственный код для долгосрочного хранения этих значений.

Удаление всего «ввода» на основе нажатия клавиш не является распространенным случаем для автозаполнения; но я считаю, AutoComplete от Гилеля Корена поддерживает это как часть функции множественного выбора.

Answer 2

В flex 4.5 это всего несколько строк кода, которые можно построить с помощью комбинированного списка.Hillel Coren также предлагает отличный компонент http://hillelcoren.com/flex-autocomplete/, но он плохо работает с 4.5 (он работает с 3 и 4).

Пример быстрого и грязного автозаполнения.

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 ));
    }
}
}

Теперь вам просто нужно убедиться, что вы добавили поле метки.Вы также можете использовать функцию itemToLabel.