11:14 AM
Reinhart
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 ?
Posted in 
