768x90 Getting Online Shouldn't be Tough- $7.49 .com Domains at Go Daddy

Autocomplete from arrayCollection data in Flex and Air

Autocomplete is still high traffic in search engine for flex or action script, although it has plugin or component now (FLEX 4 is available). But now i would like to share you my script about how find documents, which is stored in arrayCollection and reflect with autocomplete textInput. here the sample code :

CASE:
In a form there's Multiple selection List the List can be clicked multiply or can be selected using auto complete in text input. the List dataProvider is from arrayCollection. The arrayCollection is filled by data from database.

  <mx:VBox
     xmlns:mx = "http://www.adobe.com/2006/mxml"
     width = "100%"
     height = "100%"
     creationComplete = "{onComplete()}" >

  <mx:Script>
      <![CDATA[

   private var docDummyData:ArrayCollection = new ArrayCollection(
                              [{id:234, title:"qwerty data"}], 
                              [{id:1020, title:"employee data"}],
                              [{id:1033, title:"salary data"}],
                              [{id:643, title:"tomorrow presentation"}],
                              [{id:721, title:"kiranatama human resource"}],
                              [{id:162, title:"flex and air outsource"}],
                              [{id:905, title:"ruby on rails docs"}],
                              [{id:453, title:"and many more"}]);

    private var copyData:ArrayCollection = new ArrayCollection;

    private function onComplete():void{
      copyData = docDummyData;
      docDummyData.sort = sortDoc();
      docDummyData.refresh();
      listDocuments.dataProvider = docDummyData;
    }

    private function sortDoc():Sort{
       var mySort:Sort = new Sort();
       var sortLevel:SortField = new SortField("title");
       sortLevel.numeric = false;
       sortLevel.descending = false;
       mySort.fields = [sortLevel];
       return mySort;
    }

    private function filterTitle(item:Object):Boolean
    {
      var arrTxtDocs:Array = txtGDocs.text.split(", ");
      var keyWord:String = String(arrTxtDocs[arrTxtDocs.length-1]);
      listDocuments.scrollToIndex(0); // scrolled the top item
      i++;
      return item['title'].match(new RegExp(keyWord,"i")); 
    }

    private function onTyping():void{
      if(listDocuments.dataProvider != null){
        docDummyData.filterFunction = filterTitle;
        docDummyData.refresh();
       }
    }

    private function detectEnter(event:KeyboardEvent):void{

       if(event.charCode == 13){
         listDocuments.selectedIndex = i;
        if(docDummyData.length < 1){
         Alert.show("This Document is not exist or invalid");   
        }else{
         var arrInputDoc:Array = txtGDoc.text.split(",");
         arrInputDoc[arrInputDoc.length-1] = String(listDocuments.selectedItem.title)+ ", ";
         txtGDoc.text = arrInputDoc.join(", ");
         docDummyData = copyData;
         docDummyData.refresh();
         listDocuments.invalidateDisplayList();
        }
      }
    }

    private function onSelectDocs(event:ListEvent):void{
       var arrDocTitles:Array = listDocuments.selectedItems;
       var strText:String = txtGDocs.text;

       for(var i:int = 0; i < arrDocTitles.length;i++){
         var nameTitle:String = arrDocTitles[i].title.toString();
         txtGDocs.text += nameTitle+ ', ';
       }
     }
   ]]>
  </mx:Script>

  <mx:Text  text="Please enter your document title" width="100%"/>
  <mx:TextInput width="100%"
           id="txtGDocs"
           change="{onTyping()}"
           keyDown="detectEnter(event)"/>

   <mx:List id="listDocuments"
      labelField="title"
      rowCount="5"
      itemClick="{onSelectDocs(event)}"
      width="100%" 
     allowMultipleSelection="true"/>         
  </mx:VBox>        



That's all :), any body know how to make code sniped like wordpress in blogspot ?

2 Response to "Autocomplete from arrayCollection data in Flex and Air"

ktutnik said...

nice trick bro..
would be nice if you pack the whole code into one component where the dummy data is the dataSource and The list bellow the textbox is floating like combobox.

anyway about the code highlight the best one is SyntaxHighlighter follow the link for more info: http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html

Unknown said...

Hi Brother:

Yeah i was looking for SyntaxHighlighter, thanx for sending me a lightness.

Any way, how you found my blog, lolz. I see you are starting as blogger now. Why dont share your libraries to blog :D

Any way i will package it into one component. Catch up my next trick for OAuth in Action Script Client and Server side :p

 
powered by Blogger