SuggestInput

Openzet.org

목차 1 소개 2 속성 3 사용법 4 애플리케이션 예제

소개

Google, Yahoo등에서 검색할때 자동으로 사용자가 쓴 글을 검색해 검색창아래로 해당되는 요소를 보여준다.SuggestInput에서는 ListBase를 상속받는 모든 객체들을 사용해서 자동완성을 할수 있다.

속성

displayField 속성은 아주 중요한 역할을 한다. dataProvider에 있는 데이터중에 원하는 필드값을 넣어야 한다. SuggestInput이 displayField 를 가지고 검색을 한다.

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

사용법

<controls:SuggestInput id="t" displayField="name" fontSize="12" >
                <controls:list>
                        <mx:DataGrid width="400" fontSize="12">
                                <mx:columns>
                                        <mx:DataGridColumn dataField="name" headerText="이름" width="55"/>
                                        <mx:DataGridColumn dataField="location" headerText="위치" width="250"/>
                                        <mx:DataGridColumn dataField="tel" headerText="번호"/>
                                </mx:columns>
                        </mx:DataGrid>
                </controls:list>
        </controls:SuggestInput>

보는 바와 같이 DataGrid를 사용하거나 ListBase를 상속받는 List, VerticalList, openZet에서 제공하는 SelectionDataGrid, TreeDataGrid등을 사용하실수 있다.

또한 SuggestInput는 한국어의 초성,중성,종성을 나누어서 검색하기에 한국어 검색시에 확실한 검색을 사용할수 있다.

애플리케이션 예제

<?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:"가리비", location:"서울시 중구 중동 102-1", tel:"403-1111"},
                        {name:"정찬우", location:"대전시 중구 중동 120-1", tel:"405-4611"},
                        {name:"김태균", location:"경기도 부천시 원미구 상동 1-1", tel:"235-2611"},
                        {name:"김태희", location:"강원도 홍천군 원미읍 강원랜드", tel:"501-4611"},
                        {name:"각설탕", location:"제주도 제주시 하루방", tel:"684-6551"},
                        {name:"선우용녀", location:"울릉도 동남쪽 뱃길따라", tel:"841-3516"},
                        {name:"선우재덕", location:"제부도", tel:"641-5641"},
                        {name:"장동건", location:"경기도 강화군 강화면 강화리", tel:"613-6542"},
                        {name:"정형돈", location:"산도 높군 가면 힘들리", tel:"651-6517"},
                        {name:"CrownJ", location:"20-1 Sta.st Santiago US", tel:"514-6514"},
                        {name:"BigBag", location:"SBS 대기실", tel:"654-5711"},
                        {name:"소녀시대", location:"MBC 대기실", tel:"641-6584"}]);
 
                        private function init():void
                        {
                                t.dataProvider = ac;
                        }
                ]]>
        </mx:Script>
        <controls:SuggestInput id="t" headText="name" fontSize="12" >
                <controls:list>
                        <mx:DataGrid width="400" fontSize="12">
                                <mx:columns>
                                        <mx:DataGridColumn dataField="name" headerText="이름" width="55"/>
                                        <mx:DataGridColumn dataField="location" headerText="위치" width="250"/>
                                        <mx:DataGridColumn dataField="tel" headerText="번호"/>
                                </mx:columns>
                        </mx:DataGrid>
                </controls:list>
        </controls:SuggestInput>
</mx:Application>