SuggestInput

From Openzet

Contents 1 Introduction 2 Property 3 Usage 4 Application Example

Introduction

SuggestInput control that shows possible candidates of words to choose as a dropdown, which you can you can usually find at websites such as Google, Yahoo. This class allows you to specify any instances of classes that extend ListBase class as a dropdown.

Property

displayField This is the key property of this control, since this field lets you choose one field of the dataProvider through which you exercise data filtering.

var input:SuggestInput = new SuggestInput();
input.displayField = "name"

Usage

<controls:SuggestInput id="t" displayField="name" fontSize="12" >
 <controls:list>
 <mx:DataGrid width="400" fontSize="12">
 <mx:columns>
 <mx:DataGridColumn dataField="name" headerText="Name" width="55"/>
 <mx:DataGridColumn dataField="location" headerText="Locationwidth="250"/>
 <mx:DataGridColumn dataField="tel" headerText="Tel."/>
 </mx:columns>
 </mx:DataGrid>
 </controls:list>
 </controls:SuggestInput>

As you can in the example code above, you can specify any ListBase type of instance as the list property value of this class : List, VerticalList and even SelectionDataGrid or TreeDataGrid class provided by OpenZet framework. Also SuggestInput class allows you to filter Hangul data by every consonant and vowel comprising a single Korean character.

Application Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" xmlns:controls="org.openzet.controls.*">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 
 private var ac:ArrayCollection = new ArrayCollection([
 {name:"John", location:"Benjamin st.", tel:"4043-1111"},
 {name:"Jane", location:"Angela's home", tel:"4025-4611"},
 {name:"Angela", location:"Bridget st.", tel:"2365-2611"},
 {name:"Bridget", location:"Bridget Land", tel:"5071-4611"},
 {name:"Matilda", location:"Winifred st.", tel:"6814-6551"},
 {name:"Benjamin", location:"Angela st.", tel:"8841-3516"},
 private function init():void
 {
 t.dataProvider = ac;
 }
 ]]>
 </mx:Script>
 <controls:SuggestInput id="t" displayField="name" >
 <controls:list>
 <mx:DataGrid width="400">
 <mx:columns>
 <mx:DataGridColumn dataField="name" headerText="Name" width="55"/>
 <mx:DataGridColumn dataField="location" headerText="Location" width="250"/>
 <mx:DataGridColumn dataField="tel" headerText="Tel."/>
 </mx:columns>
 </mx:DataGrid>
 </controls:list>
 </controls:SuggestInput>
</mx:Application>