57. AutoComplete Part1. Текстовый компонент. Автоматическийпоиск слов по шаблону

Если ваше приложение(или flash-игра) имеет форму ввода типичных данных, например поле ввода город, пользователю будет очень удобно, если ваш текстовый компонент автоматически найдет и покажет имеющиеся в базе города по нескольким набранным буквам. Посмотрите на флешке ниже как это работает:

Здесь должна быть флешка. Установите Flash Player

Для выполнения урока нам понадобятся следующие классы:

  • autoCompletePart1.as – главный класс приложения
  • ACInput.as – основной класс текстового компонента(класс должен лежать в каталоге ru/flashpress/input)
  • ListItemRenderer.as – класс для отображения подсвеченного текста в списке найденных слов(класс должен лежать в каталоге ru/flashpress/input)
  • WordData.as – вспомогательный класс для хранения информации о найденных словах(класс должен лежать в каталоге
    ru/flashpress/input)

Так же рядом с классом autoCompletePart1.as должен лежать текстовый файл names.txt со списком городов. Файл должен выглядить так:

Скачать файл с полным списком городов можно здесь (файл в кодировке UTF-8!).


Класс autoCompletePart1.as :


Класс ListItemRenderer.as:

Основная идея этого класса в том что надо унаследоваться от стандартного класса CellRenderer(строка 13) и убрать
имеющееся текстовое поле из списка отображения(строка 20), т.к. это поле не поддерживает отображение html кода(ну или я не понял как это сделать :) , если вы знаете – поделитесь). Далее создаем свое собственное текстовое поле txt:TextField (строки 24-29) и заполняем это поле значением html из полученного объекта WordData(строка 45).


Класс WordData.as:

Это вспомогательный класс, который необходим для того что бы можно было в одном месте сохранить найденное слово в исходном виде, и html код для отображения подсветки в списке найденных слов.


Ну и собственно сам класс ACInput.as – компонент отображающий текстовое поле со списком найденных слов по введенном шаблону:

Обратите внимание на строку 41, там мы переопределяем стиль cellRenderer, что бы сообщить списку что для отображения найденных элементов нужно использовать наш созданный ранее класс ListItemRenderer(который умеет подсвечивать подстроку в слове). Для скрытия списка найденных слов, мы слушаем событие клика на stage(строка 65). Но что бы список не скрывался когда мы кликаем на сам список(с целью выбрать найденное слово), мы должны слушать событие клика на самом компоненте(строка 67), и в обработчике этого события останавливаем дальнейшее распространение события(строка
95
).


Скачать исходники можно здесь.

Задание #1
Сделайте рядом компонентом ACInput настройку(CheckBox): “Искать только точное совпадение”. При установки этой галочки, компонент ищет только те слова которые в точности совпадают с введенным словом. Ну и до кучи можно сделать еще одну настройку(CheckBox): “Учитывать регистр”. При включенной настройке в поиске обязательно учитывается регистр слов.

Если у вас что то не получилось или вы хотите получить оценку сделанному, прикладывайте в комментариях или отправляйте мне на почту архив с вашим проектом. Отправить письмо можно в разделе Контакты

Да прeбудет с вами Flash.
Serious Sam
Эту статью прочитали 793 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress: